By default, dropdown on bootstrap are dynamic based on the length of the text of the selected item. This will break the harmony of my layout and I can't find a solution.
Basically I want a row containing a search input and on the right side a dropbox. Something very simple...How to make this possible ?
<div class="container-fluid">
<div class="row" id="searchAndLogin">
<div class="col-md-9">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-md-3">
<div class="btn-group">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
You can set the width of the btn-group and its btn elements as well as the dropdown-menu to fit the width of the column you place it on.
CSS
#searchAndLogin .btn-group {width:100%;}
#searchAndLogin .btn-group .btn {width:90%;}
#searchAndLogin .btn-group .btn.dropdown-toggle {width:10%;}
#searchAndLogin .btn-group .dropdown-menu {width:100%;}
Live example here: http://www.bootply.com/WPhb5tLZmh
Related
My question is best described by simple JSFiddle. All I want to do is to make my dropdown menu width be dependent on its content width so that all option labels are on single line without line breaks.
JSFiddle
<div>
<span style='cursor:pointer; float:right'>
<div class="btn-group pull-right">
<button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span>
</button>
<ul style = 'padding:10px' class="dropdown-menu">
<li class="dropdown-submenu">
<input id="full_package_filter" type="checkbox" name="vehicle" checked>С полным пакетом документов<span class='useful_stat'></span>
<br>
<input id="not_full_package_filter" type="checkbox" name="vehicle" checked>С неполным пакетом документов<span class='useful_stat'></span>
<br>
</li>
<li class="dropdown-submenu"></li>
<li class="dropdown-submenu"></li>
<li class="dropdown-submenu"></li>
</ul>
</div>
</span>
</div>
Try adding white-space: nowrap; rule to your dropdown menu.
.dropdown-submenu {
white-space: nowrap;
}
I'm looking for the right way of displaying buttons around an input field in one row, and avoid (if possible) the use the "width" attribute. I want the buttons and field to line up in a fixed width and position even as the value (that the user chooses from the drop down) change
<div class="row" style="margin-top: 30px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group" style="padding-left: 40px;">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-map-marker" style="color:blue"></i> United States <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>United States</strong></li>
<li>France</li>
<li>United Kingdom</li>
</ul>
</div>
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>USD</strong></li>
<li>EUR</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="amountnum"> </label>
<input style="font-weight: bold;text-align: center" type="text" class="form-control input-lg" id="amountnum" placeholder="number" value="10">
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1 month <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li>1 Weeks</li>
<li>2 Weeks</li>
<li><strong>1 month</strong></li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
jsfiddle: https://jsfiddle.net/drorm/k43kyfpw/
when the screen opens, make the left pane narrower to see the buttons line up (instead of falling dropping to separate rows)
Suggestions are appreciated
Add the following CSS style
.navbar-form,.form-inline {
display: flex;
}
The use of flex (or inline-flex) is quite powerful. Combine with the css flex property on items to control the growth and shrinking of controls.
Google "CSS flex" for more.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have the following single line containing an search input bar and 2 buttons. How do I style this to make the search input box smaller according to the buttons next to it? I would like to add 2 more input fields to the right of the search box and to the left of the buttons shown in the image. Is there a way to do this without using "col-md-x"?
http://i.imgur.com/r4kqYm0.png
This is what I have so far but I feel like it is very hacky.
<div class="col-md-10 search-left">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" dropdown>
<button type="button" class="btn btn-default dropdown-toggle first-dropdown" dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
</div>
<div class="input-group-btn" dropdown>
<button type="button" class="btn btn-default dropdown-toggle second-dropdown"
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Search term" ng-model="search.value">
</div>
</div>
</form>
</div>
<div class="col-md-2 search-right">
<div class="pull-right" popover="Please select rows to export" popover-trigger="mouseenter">
<button class='btn btn-default'><span class="glyphicon glyphicon-download-alt"></span></button>
</div>
<div class="pull-right">
<button class='btn btn-default add-item' ng-click="addItem()">Add Staff</button>
</div>
</div>
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls.
I've got two buttons. One with the text that is very long, and the other with text that has a short length.
The default with BS is to vary the length of the button based on the length of the text. My question is: how can I make them both the same length, irregardless of text length.
See my example here: http://bootply.com/110312
Thank you!
I suggest you to test following code. Here the button-group will be expanded to the width of the parent element. If working please remove inline styles.
<div class="btn-group calendar-list-item" style="width:100%">
<button type="button" class="btn btn-success" style="width:88%">I am a very long button for all the world to see</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<br>
<br>
<div class="btn-group calendar-list-item " style="width:100%">
<button type="button" class="btn btn-primary" style="width:88%">I wish I was that long</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
You can use '.btn-block' class on buttons. this will expand button to the width of parent element. Read more
I am trying make a search bar which should look some thing like this:
http://s22.postimg.org/ecaxmtj8x/search_bar.png
I am using bootstrap 3. In the code below I have 3 buttons, where the "menu 2" button opens a dropdown menu. I would like the "menu 1" button to open a menu too. But so far my attempts have failed.
When I try to group the buttons into a btn-group, it seperates from the joined search bar, which is not what I want. Is there a way to have 2 menu's inside a div using the input-group class?
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
<button class="btn btn-primary" type="button">
test 1 <span class="caret"></span>
</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
test 2 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
I faced the same problem and found a pure bootstrap solution. Avoid any extra css "repairs" by wrapping all drop down buttons in a single input-group-btn div, then each drop down button wrap in a btn-group div. Using multiple input-group-btn divs in a single input-group div breaks the styling and requires css repairs as offered in another solution. The bootstrap doc hints at this. Here is a simple example to demonstrate:
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-a</span></button>
<ul class="dropdown-menu">
<li>li-a-1</li>
<li>li-a-2</li>
<li>li-a-3</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-b</span></button>
<ul class="dropdown-menu">
<li>li-b-1</li>
<li>li-b-2</li>
<li>li-b-3</li>
</ul>
</div>
</div>
<input class="form-control" type="text" placeholder="search">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</input>
</div>
It's quite easy to do that. Though I employed a small hack to make it look proper (It may be done without that hack too I think ... Not too sure )
jsFiddle Demo : http://jsfiddle.net/niranjan94/dgs25/
HTML:
<div class="col-lg-6 visible-xs">
<br>
<form action="" method="get" role="search">
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search Advertisements">
<span class="input-group-btn">
<button class="btn btn-primary custom" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Button 2 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
</div>
</form>
</div>
CSS (Overriding default border-radius to make it look proper):
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
(There might be other better ways to do this too)
That's it ... :) Hope it solves your problem .
Well, for starters you havent set the data-toggle="dropdown" for button test 1
The link to the image you posted doesnt work, but you need to also set a div.input-group-btn to wrap those button and ul.
You should take a closer look at Bootsrap documentation.