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
Related
I am working on an app that uses Bootstrap 3. I have a drop down list that is currently defined like this:
<select id="options" class="form-control">
<option>Go home</option>
<option>Go Left</option>
<option>Go Up</option>
<option>Go Right</option>
<option>Go Down</option>
</select>
I like the behavior of the drop down list because when you choose an option, its text is shown. I also like the fact that the drop down stretches to fill the available space. However, I want the dividers that Bootstrap's button drop downs provides. In an effort to get the best of both worlds, I've attempted the following:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Go Home... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Go Home</li>
<li class="divider"></li>
<li>Go Left</li>
<li>Go Up</li>
<li>Go Right</li>
<li>Go Down</li>
</ul>
</div>
When I choose an option, the text does not get updated though. In addition, the drop down does not stretch to fill the available space.
You can use the btn-block class to make the buttons and dropdown fill width..
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Go Home... <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li>Go Home</li>
<li class="divider"></li>
<li>Go Left</li>
<li>Go Up</li>
<li>Go Right</li>
<li>Go Down</li>
</ul>
</div>
The only way to get the dropdown to behave as a select control is using JavaScript and/or jQuery like this..
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
Demo: http://codeply.com/go/KI7AAEtWeo
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
I am currently using the CSS bootstrap 3.2 in my application.
I am trying to place 2 drop down menu "with the arrow only- not button style" next to each other and then to the right I want to add a search bar.
I want to use the the dropdown menu that the bootstrap has but without the button style "arrow only" and a small search bar to the right in the vertical center.
I have tried to do that but the dropdown menus and the search bar do not line up.
here is a screenshot of what I have done
and here is my code
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li role="presentation" class="divider"></li>
<li>Logout</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Company Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a class="master_client_change" href="#" id="current_client_id_2">Comp 1</a></li><li><a class="master_client_change" href="#" id="current_client_id_1">Comp 2</a></li><li><a class="master_client_change" href="#" id="current_client_id_3">Comp 3</a></li><li><a class="master_client_change" href="#" id="current_client_id_6">Comp 4</a></li></ul>
</li>
</ul>
<div class="width-sm-size box-inline-block">
<form action="/accounts_search.php" method="get" id="searchforactivities" class="navbar-form navbar-right row-right-xxsm-margin" role="search">
<div class="input-group">
<input type="search" class="form-control" name="search_term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</form>
</div>
How can I get the dropdown menu and the search bar to line up?
and is there a trick in making the search bar little fancy by making the the corners of the input round and the Go button a search icon?
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.
I am getting some part of my button dropdown out of the page viewing area.
I am using standard bootstrap code:
<div class="btn-group">
<button class="btn btn-info">Log In</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Log In with Facebook</li>
<li class="divider"></li>
<li>Create New Account</li>
</ul>
</div>
I have similar issue on bottom of the page also, where I have another button dropdown and then the dropdown part opens, it does not automatically adjust itself and I have to scroll down to view all the options.
Any suggestion?
I guess you didn't position the .btn-group in the right way.
Put it into the .navbar-inner-div and add the class .pull-right.
DEMO JSFIDDLE
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<div class="btn-group pull-right">
<button class="btn btn-info">Log In</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Log In with Facebook</li>
<li class="divider"></li>
<li>Create New Account</li>
</ul>
</div>
</div>
</div>
You can make the following:
.dropdown-menu {
left: -80px;
}
I don't know why but pulling left is useless.