I am trying to make sth like this:
So far i have done:
Html:
<div class="panel-heading" data-toggle="collapse" href="#data2">
<div class="heading">
APPLICATION
</div>
<span class="caret icon"></span
</div>
And css:
.panel-heading {
padding: 0px;
overflow: hidden;
}
.panel-heading>.heading {
padding: 5px;
float: left;
}
.panel-heading>.icon {
float: right;
background: yellow;
height: 100%;
padding: 5px 10px;
}
.item-detail .mini-title {
font-size: 14pt;
margin-bottom:5px;
color: orange;
font-weight: bold;
margin-top: 10px;
}
.panel-heading {
background: #FF6600;
}
.panel-body {
background: #EAECED;
}
.caret {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
width:1px;
}
JSFiddle result:
JSFiddle
And i don't know how to handle right side of div.
I want to make a square a yellow color, and rest - orange. Caret should be black and centered in small square.
Thanks
You cannot add the icon class and the caret class to the same element, because you want to use the borders to create the arrow.
Try something like this:
<div class="panel-heading" data-toggle="collapse" href="#data2">
<div class="heading">
APPLICATION
</div>
<div class="icon"><div class="caret"></div></div>
</div>
(It works in your fiddle)
To center an element horizontally, I usually use the margins, set the left and right margins to 'auto', for example:
.caret { margin: 8px auto 0px auto; }
this will center your element and set its top margin to 8px
Related
I'm having some trouble aligning my dropdown menu in my angular app.
Please see the screenshot attached. The menu extends too far right of the screen. I need it to align to the "top right" of the ellipses instead of the "top left" as it is currently. The menu is currently functioning in a table.
Any assistance in getting the menu to shift to the left would be greatly appreciated.
Here is the HTML/CSS:
<td class="dropup">
<div class="dropup">
<button style="background-color: white;" class="dropbtn">
<img class="icon" src="assets/ellipsis.png">
</button>
<div class="dropup-content">
Admin Functionality
Download Project Snapshot
<a [routerLink]="['/project/'+j._id+'/project-activity']">View Project Activity</a>
Archive Project
<a *ngIf="j.creatorid != user._id" (click)="onLeaveProjectClick(j._id, j.projectname, n)">Leave Project</a>
</div>
</div>
</td>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropup {
position: relative;
display: inline-block;
float:right;
}
.dropup-content {
display: none;
position: absolute;
transform-origin: 60% 40%;
top: 20px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
}
.dropup-content :hover {
border-radius: 10px;
}
.dropup-content a {
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {
background-color: #ddd;
color: #00aca8 !important;
}
.dropup:hover .dropup-content {
display: block;
border-radius: 10px;
}
As you set .dropup-content to absolute, it will be left aligned relative to .dropup as .dropup-content is within .dropup. But as your class is already absolute, simply add:
right: 0;
left: auto; // Unsure if you really need this though
to .dropup-content. This will take care that the class is right aligned relative to .dropup.
add to class .dropup-content this:
right:0;
https://jsfiddle.net/b1stpfr4/2/
I have a modal that looks like this
As you can see, the modal has border-radius but the buttons at the footer dont. I want to put a border-radius at the bottom left of the purple button and a border-radius at the bottom right of the gray button. Ive tried border-bottom-left-radius and border-bottom-right-radius but it didnt work. Here`s my codes
Modal:
<!--Notifier Modal-->
<div id="notifier-modal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="confirm-purchase-label">
Only {{size}} out of {{totalsize}} transactions have been loaded <br>
<h5>The complete list of transactions will be sent to your email after the process.</h5>
</div>
</div>
</div>
</div>
<div class="modal-footer g-nopadding">
<div class="col-md-6 g-nopadding">
<button type="button" class="btn btn-purple btn-block col-md-6" ng-click="proceedAction();">PROCEED</button>
</div>
<div class="col-md-6 g-nopadding">
<button type="button" class="btn btn-gray btn-block col-md-6" data-dismiss="modal">CANCEL</button>
</div>
</div>
</div>
</div>
CSS:
#notifier-modal .btn,
{
border: none!important;
border-radius: 0px!important;
font-family: 'AvenirMedium';
height: 50px!important;
}
#notifier-modal .modal-md{
width: 500px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-content{
background:#f0f0f0;
box-shadow:0px 0px 30px 0px rgba(101,101,101,0.50);
border: none;
}
.btn-gray {
color: #797979!important;
background:#e0e0e0!important;
font-size:14px!important;
border: none!important;
}
.btn-purple {
color: #f0f0f0!important;
background-color: #9c82cd!important;
font-size:14px!important;
border: none!important;
}
.modal-footer{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
overflow: hidden solves it.
You can just apply a border-radius to all side of the modal that already has the top left/right border-radius, and assuming the buttons are at the bottom corners of that element, if you also add overflow: hidden to the modal with the border-radius, it will clip the corners of the buttons.
body {
background: #aaa;
text-align: center;
}
div {
background: #fff;
border-radius: 1em;
padding: 1em;
display: inline-block;
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
}
button {
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
width: 50%;
left: 0;
padding: .5em 0;
background: #09c;
color: white;
border: 0;
}
button:last-child {
left: auto;
right: 0;
border-left: 1px solid white;
}
<div>
<button>button</button>
<button>button</button>
</div>
To put a border-radius at the bottom left of the purple button You can use below CSS
.btn-purple {
color: #f0f0f0!important;
background-color: #9c82cd!important;
font-size: 14px!important;
border: none!important;
border-radius: 0 0 0 20px; /*20px is example you can use how much radius you want*/
}
To put a border-radius at the bottom right of the gray button. You can use below CSS
.btn-gray {
color: #797979!important;
background: #e0e0e0!important;
font-size: 14px!important;
border: none!important;
border-radius: 0 0 20px 0;
}
Add the following CSS to your buttons and adjust for each accordingly
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
The issue is simply a word-ordering one :)
Instead of border-radius-bottom-left and border-radius-bottom-right, the attributes you're looking for are border-bottom-left-radius and border-bottom-right-radius:
.modal-footer {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Hope this helps! :)
As discussed you have border radius set to zero important in css
#notifier-modal .btn,
{
border: none!important;
border-radius: 0px!important;
font-family: 'AvenirMedium';
height: 50px!important;
}
Try commenting it out and then adding in the bottom ones.
There are many resources online but the best one i have found is
Border radius
it lets you set border radius seperatly or all at once. It also give you the CSS to use.
Cheers
I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?
I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.
Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
I'm using this hover effect for buttons, but in a few cases when the height changes, the top remains the same and the bottom moves up, instead of vice versa like it should. How can I make sure it always goes in the correct direction?
jsfiddle
.button {
box-sizing: border-box;
display: inline-block;
width: 215px;
height: 55px;
color: white;
font-family: $arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35);
letter-spacing: .1em;
border-radius: 3px;
position: relative;
background: #009ee0;
border: 1px solid #148fc6;
border-bottom: 4px solid #148fc6;
}
.button:hover {
border-bottom: 1px;
height: 53px;
}
.button span {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-43%);
line-height: 1.2;
}
div {
padding: 20px 5px;
}
<div>
<a href="#" class="button">
<span>Wrong way</span>
</a>
</div>
<div>
<a href="#" class="button">
<span>I work fine</span>
</a>
<a href="#" class="button">
<span>I work fine</span>
</a>
</div>
You're reducing the height from 55px to 53px. That 2px has to go somewhere. The top button is just collapsing it. (The bottom two are doing the same, it just doesn't look like it because they are being affected by vertical text alignment). change your hover rule to this to accommodate for the height loss.
.button:hover {
border-bottom: 1px;
margin-top: 2px;
height: 53px;
}
https://jsfiddle.net/exd6hhvz/
I was able to make it work consistently by adding margin-top: 2px; to .button:hover
Here's an example: https://jsfiddle.net/vf03czp5/
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}