In bootstrap 3, I have a button group. If the first item in the button group has a hidden class, the first visible element loses it's rounded border radius.
How can I modify the CSS below so that if the first element has a hidden class, the first visible element should still have the rounded corners on the left?
body{padding:20px}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div role="group" class="btn-group btn-group-sm" id="preview-paging">
<div role="group" class="btn-group hidden" id="preview-type">
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" type="button">
<span id="preview-label">Desktop</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a data-device="desktop" href="#design">Desktop</a></li>
<li><a data-device="mobile" href="#design">Mobile</a></li>
</ul>
</div>
<div class="btn btn-default btn-sm btn-paging" id="preview-prev"><i class="fa fa-chevron-left"></i></div>
<div class="btn btn-default btn-sm btn-paging" id="preview-next"><i class="fa fa-chevron-right"></i></div>
</div>
The best solution would be Javascript.
If you know your HTML won't change (you will just have those 3 divs) you can use:
.btn-group div:first-child + div:not(.hidden) {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
You should then change the rule below or add an !important to the rule above.
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
Related
Given the following design:
I'd like to hide the 'magnifier' icon and show the 'close' X icon in case the the input's placeholder is not shown.
My markup is:
input:not(:placeholder-shown) {
// hide 'magnifier' icon
// show 'close' icon
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group input-group-sm w-50" id="search-box">
<div class="input-group-prepend">
<span class="input-group-text bg-white" id="input-magnifier">
<i class="fa fa-search text-muted"></i>
</span>
<span class="input-group-text bg-white">
<i class="fa fa-close text-muted"></i>
</span>
</div>
<input type="search" placeholder="Search with 'exact match'" class="form-control" />
<div class="input-group-append">
<div class="dropdown btn-group" role="group">
<button class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">filters</button>
</div>
</div>
</div>
How to make this input group behave in that way? Or in another words, how do I access the icons from my input element in Scss?
Due to the way CSS works, there is no way to do this without javascript given your current html markup. CSS sibling and adjacent selectors can only select elements that come after a given element, because css "cascades" through the markup from top to bottom.
That said, if you switch around your markup you can absolutely achieve this. Luckily, the input-group class already has display:flex;, so if you move the children elements, you can still control the display order with the order property.
Then all you need to do is use the + (adjacent) selector. See the attached code.
/* CSS adjacent selectors used here, to select the prepend
class only when the placeholder is shown or not shown */
input:not(:placeholder-shown)+.input-group-prepend #input-magnifier {
display: none;
}
input:placeholder-shown+.input-group-prepend #input-delete {
display: none;
}
/* This is the code used to reorder the elements so that
the buttons still appear before the input */
.input-group-prepend {
order: -1;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group input-group-sm w-50" id="search-box">
<input type="search" placeholder="Search with 'exact match'" class="form-control" />
<!-- moved .input-group-prepend div to here so that the adjacent selector works -->
<div class="input-group-prepend">
<span class="input-group-text bg-white" id="input-magnifier">
<i class="fa fa-search text-muted"></i>
</span>
<span class="input-group-text bg-white" id="input-delete">
<i class="fa fa-close text-muted"></i>
</span>
</div>
<div class="input-group-append">
<div class="dropdown btn-group" role="group">
<button class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">filters</button>
</div>
</div>
</div>
The buttons displayed in this fiddle are not properly displayed: Since the text is in Hebrew, the first button (with id="first") should be the most right one, but is currently the most left one.
Playing with the style, it seems that this is caused by the display attribute of btn-group class (whose value is inline-block), and when I change it to display: flex the buttons are displayed in the correct order, but the first and last child's borders (right and left borders) get flipped.
I was trying some advice found in this question, but didn't manage to make it work.
Code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-hdd"></span> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>
bootstrap floats your elements, you need also to overwrite float direction:
div[dir="rtl"] .btn-group .btn
{
float:right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-hdd"></span> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>
you can also use the class .pull-right.
HeyJude wrote: the borders get flipped. If you look closely, you'll notice that the left border (the one with the rounded corners) of the first child should be the right one, and vice versa for the last child.
for the rounded corners, a trick could be to use transform instead rewritting CSS. It requires to encapsulate text within the span too. Icone is generated via a pseudo and should not mess it up.
div[dir="rtl"] .btn:first-of-type,
div[dir="rtl"] .btn:last-of-type,
div[dir="rtl"] .btn:first-of-type span,
div[dir="rtl"] .btn:last-of-type span {
transform: scale(-1, 1);
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-hdd"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-plus-sign"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-minus-sign"> שלוש</span>
</button>
</div>
</div>
I gave it some more trials, and eventually got it with the trick of rotating the btn-group and then rotating back the text (keeping each cell's content in its own span element):
.rotate
{
transform: rotateY(180deg);
}
.rotate-back
{
transform: rotateY(180deg);
display: inline-block;
direction: rtl;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group pull-right rotate" role="group">
<button id="first" type="button" class="btn btn-default ">
<span class="glyphicon glyphicon-hdd"></span><span class="rotate-back"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span><span class="rotate-back"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span><span class="rotate-back"> שלוש</span>
</button>
</div>
The btn-default color is white.But I am unable to change the color of the btn-default
<div class="pageOne">
<h1 class="text-center" id="header_text"> a Good Tree production </h1>
<div class="btnList">
<a class="btn btn-default" href = "#"> a Good Tree production</a>
<a class="btn btn-default" href = "#"> About Us</a>
<a class="btn btn-default" href = "#"> Contact Us</a>
<a class="btn btn-default" href = "#"> Works</a>
</div>
</div>
Here is the CSS
.btn-default{
background-color: black !important;
}
#header_text{
font-family: 'Boogaloo', cursive;
color: white !important;
}
Could anyone help me with this.
The Bootstrap CSS is overriding yours. You need to provide a higher-level CSS selector, like:
#header_text .btn-default {
background-color: black !important;
}
This is higher-level than the Bootstrap selector, which is:
.btn.btn-default {
/* Whatever their CSS is */
}
I'm using Bootstrap, and I'd like to set an entire btn-group to have a width of 100% of its parent element. I'd also like the inner buttons to take equal widths. As it is, I can't achieve either.
I've made a JSFiddle here: http://jsfiddle.net/BcQZR/12/
Here is the HTML:
<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>
And here is my current CSS, which doesn't work:
#colours {
width: 100%;
}
Bootstrap has the .btn-group-justified css class.
How it's structured is based on the type of tags you use.
With <a> tags
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
With <button> tags
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
There's no need for extra css the .btn-group-justified class does this.
You have to add this to the parent element and then wrap each btn element in a div with .btn-group like this
<div class="form-group">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
</div>
<div class="btn-group">
<button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
</div>
</div>
</div>
BOOTSTRAP 2 (source)
The problem is that there is no width set on the buttons. Try this:
.btn {width:20%;}
EDIT:
By default the buttons take an auto width of its text length plus some padding, so I guess for your example it is probably more like 14.5% for 5 buttons (to compensate for the padding).
Note:
If you don't want to try and compensate for padding you can use box-sizing:border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I don't like the solution of settings widths on .btn because it assumes there'll always be the same number of items in the .btn-group. This is a faulty assumption and leads to bloated, presentation-specific CSS.
A better solution is to change how .btn-group with .btn-block and child .btn(s) are display. I believe this is what you're looking for:
.btn-group.btn-block {
display: table;
}
.btn-group.btn-block > .btn {
display: table-cell;
}
Here's a fiddle: http://jsfiddle.net/DEwX8/123/
If you'd prefer to have equal-width buttons (within reason) and can support only browsers that support flexbox, try this instead:
.btn-group.btn-block {
display: flex;
}
.btn-group.btn-block > .btn {
flex: 1;
}
Here's a fiddle: http://jsfiddle.net/DEwX8/124/
For bootstrap 4 just add this class:
w-100
Bootstrap 4 removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
Try this:
<div class="btn-group d-flex" role="group>
<button type="button" class="btn btn-primary w-100">Submit</button>
<button type="button" class="btn btn-primary w-100">Cancel</button>
</div>
Angular - equal width button group
Assuming you have an array of 'things' in your scope...
Make sure the parent div has a width of 100%.
Use ng-repeat to create the buttons within the button group.
Use ng-style to calculate the width for each button.
<div class="btn-group"
style="width: 100%;">
<button ng-repeat="thing in things"
class="btn btn-default"
ng-style="{width: (100/things.length)+'%'}">
{{thing}}
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-block">
<button type="button" data-toggle="dropdown" class="btn btn-default btn-xs btn-block dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li>Action one</li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>
Bootstrap 4
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Bootstrap 4 Solution
<div class="btn-group w-100">
<button type="button" class="btn">One</button>
<button type="button" class="btn">Two</button>
<button type="button" class="btn">Three</button>
</div>
You basically tell the btn-group container to have width 100% by adding w-100 class to it. The buttons inside will fill in the whole space automatically.
I'm using twitter bootstrap.
I'm trying to create a button with dropdown that should be displayed right after a text.
The button and everything are created but it appears on the next line instead of being on the same line as my texte.
This is more or less the code:
<h1> Some title
<div class="btn-group" xmlns="http://www.w3.org/1999/html">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> ...my menu's...</li>
</ul>
</div>
</h1>
The h1 tag has no special positioning assigned. I've tried to add a float: left to the h1 tag but it doesn't work because there is a clear:both in the btn-group's css.
What's wrong? Thx!
UPDATE:
I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.
I don't really know how you got that markup, but here is a working version : (demo on jsfiddle)
<h1> Some title
<small>
<span class="btn-group">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>...my menus...</li>
</ul>
</span>
</small>
</h1>
h1 .btn-group { display: inline-block; }
I only suggest you to use the <small> tag, because it sets some different styles from <h1>. But it is not required for this to work.