I am trying to get a dropdown and a multi-toggle (radio buttons) to stay aside of each other. However, I can't get why they keep appearing of different size... I use bootstrap 4.0.
here is the html snippet of my header
<div id="header">
<p style="margin:0px;"><img src="assets/logo2.svg" width="63" height="14" style="left: 0px; top: 0px; border: 0;"></p>
<h1 id="title">Price Indicies</h1>
<div id="myDropdown" class="dropdown float-right">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">Boroughs
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Boroughs</a>
<a class="dropdown-item" href="#">Brooklyn hoods</a>
<a class="dropdown-item" href="#">Manhattan hoods</a>
<a class="dropdown-item" href="#">Queens hoods</a>
</div>
</div>
<div class="btn-group float-right" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="sales" autocomplete="off">sales</input>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="rentals" autocomplete="off">rentals</input>
</label>
</div>
</div>
Here is the live code:
https://run.plnkr.co/64KRhkyz35xXoeMw/
I am assuming you want them to the the same heihgt as the drop down button. Your buttons are smaller because there is no text in them. If you were to add a space ( ) they would be the size of the normal bootstrap button. Then you would need to add the btn-sm class to make them the same size as the drop down button (or remove that class from the dropdown button).
You can use following css to have dropdown and radio button of same size
label.btn.btn-primary {
padding :13px;
}
How do I center a button between two other buttons in a toolbar?
Here's my code and resulting screenshot
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
I'm using OnsenUI (and will be using VUE with it) so is there a class I can simply add from bootstrap or any other framework included with OnsenUI?
Or can I use some custom CSS to do this?
Similar to this question but with OnsenUI and Monaca (so good for both ios and android)
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<span class="stretcher"></span>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<span class="stretcher"></span>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
CSS:
#toptoolbar {
display: flex;
align-items: center;
justify-content: center;
}
.stretcher {
flex: 1;
}
// HTML
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button title">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
//CSS
.toolbar-button.title{
position: absolute;
left: 49%;
}
This is just a plain css solution.
updated Fiddle http://jsfiddle.net/JfGVE/2459/
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)
I know this seems silly, but this menu is driving me nutty. I've fixed it a few times, but it keeps coming back and biting me in the butt.
The menu looks like this. And as you can see half of it is cut off so you cannot read the words.
I have tried many ways to fix this. I have moved the menu around in the html, tried positioning it and adding a z-index. But I have had no luck.
The html looks like this
<div class="pull-right" style="padding-top: 0px;">
<!-- drop button -->
<div class="btn-group js_editTab-wrapper open" data-bind="attr: { 'data-id' : id, 'data-type' : entityType}" data-id="25402" data-type="KioskPageControl">
<!-- ko if : $data.editTabs -->
<button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropBorder" role="menu" data-bind="foreach: $data.editTabs">
<li>Appearance</li>
<li>Identification</li>
<li>Parameters</li>
<li>Rules</li>
</ul>
<!-- /ko -->
</div>
<span class="drag btn-xs btn-labeled btn-info">
<span class="btn-label"><span class="glyphicon glyphicon-move"></span></span>
</span>
<span class="remove btn-xs btn-labeled btn-danger">
<span class="btn-label"><span class="glyphicon glyphicon-remove"></span></span>
</span>
</div>
and the css for the menu looks like this
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
overflow: visible;
Obviously the display none turns to block when clicked on the dropdown menu and the blue bar does have a z-index on it of 1. Any help would be appreciated!
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.