I'm trying to implement an input group that has multiple buttons on the left and for now only one button on the right as shown in this image:
The problem is, as soon as I have more than one button per side, the input field resizes to max width and kicks the one button out on smaller displays:
With only a button on the left and a button on the right, it works 100% on all screen sizes:
Le Code:
<div class="input-group br">
<span class="input-group-btn">
<div class="btn-group">
<a href="#" class="btn btn-primary clear-search">
<span class="glyphicon glyphicon-refresh"></span>
</a>
<a href="#" class="btn btn-primary qr-code">
<span class="glyphicon glyphicon-qrcode"></span>
</a>
</div>
</span>
<input class="form-control search" type="search" name="search" placeholder="Search">
<span class="input-group-btn">
<div class="btn-group dropup">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-search"></span>
Search
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="buyer-identifier" href="#">Buyer Number</a></li>
...
<li class="divider"></li>
<li><a class="clear-search" href="#">Clear Search</a></li>
</ul>
</div>
</span>
</div>
Fiddle demo
Any idea on how to make the first image work for all screen sizes?
You don't need the btn-group element...
<div class="input-group br">
<span class="input-group-btn">
<a href="#" class="btn btn-primary clear-search">
<span class="glyphicon glyphicon-refresh"></span>
</a>
<a href="#" class="btn btn-primary qr-code">
<span class="glyphicon glyphicon-qrcode"></span>
</a>
</span>
<input class="form-control search" type="search" name="search" placeholder="Search">
<span class="input-group-btn">
<div class="btn-group dropup">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-search"></span>
Search
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="buyer-identifier" href="#">Buyer Number</a></li>
...
<li class="divider"></li>
<li><a class="clear-search" href="#">Clear Search</a></li>
</ul>
</div>
</span>
</div>
Bootply example
Don't use two button group wrapper elements.
<div class="input-group br"> <span class="input-group-btn">
<a href="#" class="btn btn-primary clear-search">
<span class="glyphicon glyphicon-refresh"></span>
</a>
<a href="#" class="btn btn-primary qr-code">
<span class="glyphicon glyphicon-qrcode"></span>
</a>
Demo
use btn-secondary class
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">☺</button>
<button type="button" class="btn btn-secondary">SEND</button>
</div>
</div>
Related
I'm new to Bootstrap.js and am trying to a align an input-group side-by-side with a dropdown but can't get it to work--code and figure below. I have tried the table approach but end up the elements vertically misaligned. What should I do?
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Color By
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="colorBy">
<li>Diameter</li>
<li>LOF</li>
<li>Year</li>
<li>Material</li>
</ul>
</div>
<div class="row" style="width: 500px">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="resetView()">Reset View</button>
<button type="button" class="btn btn-default" onclick="zoomToPipe()">Zoom to Pipe</button>
</div>
<input type="text" id="pipeId" name="pipeId" value="Pipe ID" class="form-control" style="width: max-content;">
</div>
</div>
</div>
What I get:
What I want:
Try this:
<div class="row">
<div class="col-sm-2">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Color By
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="colorBy">
<li>Diameter</li>
<li>LOF</li>
<li>Year</li>
<li>Material</li>
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="resetView()">Reset View</button>
<button type="button" class="btn btn-default" onclick="zoomToPipe()">Zoom to Pipe</button>
</div>
<input type="text" id="pipeId" name="pipeId" value="Pipe ID" class="form-control" style="width: max-content;">
</div>
</div>
</div>
I have a btn-group that gives me an editable combox box. The only problem is that it's not aligned properly.
Here is the current box-
<div class="input-append btn-group form-control">
<input class="input-sm span2" id="errorcount" size="16" type="text" value="Error">
<ul class="dropdown-menu" id="dropdown-menu">
<li><i class="icon-pencil"></i>less than 1,000</li>
<li><i class="icon-pencil"></i>1,000 - 5,000</li>
<li><a href="#"><i class="icon-pencil">
</ul>
<a class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
</div>
New changes
<div class="input-group">
<input type="text" class="input-sm" id="errorcount" size="" value="Error">
<div class="input-group">
<button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
<li><i class="icon-pencil"></i>less than 1,000</li>
<li><i class="icon-pencil"></i>1,000 - 5,000</li>
</ul>
</div>
</div>
You're missing a few container classes such as form-control and input-group.
Here's a working example of your code:
<div class="input-group">
<input type="text" class="form-control" id="errorcount" size="16" value="Error">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
<li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>
</ul>
</div>
</div>
jsFiddle here: https://jsfiddle.net/5g6c281b/
I've taken this css from this website sub-menu-drop-down-on-mouse-hover-twitter-bootstrap
and this is the code:
/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
margin: 0;
}
HTML
<ul class="nav navbar-nav" style="padding: 15px;">
<li>
<input autofocus type="text" ng-model="search" class="form-control ignore-max-width" name="mainsearch"
placeholder="Enter Membership Number..." style="font-size: small;">
</li>
<li class="dropdown dropdown-large ">
<a href="#/" class="dropdown-toggle no-padding" data-toggle="dropdown">
<div type="button" class="btn btn-default btn-sm btn-primary">
<span class="home-link glyphicons glyphicons-menu-hamburger"></span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-large row col-md-12">
<li class="col-sm-11">
<ul style="list-style-type: none; padding: 5px;">
<li>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-link">Left</button>
<button type="button" class="btn btn-default btn-link">Middle</button>
<button type="button" class="btn btn-default btn-link">Right</button>
<button type="button" class="btn btn-default btn-link">Right</button>
</div>
</li>
<li>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-link">Left</button>
<button type="button" class="btn btn-default btn-link">Middle</button>
<button type="button" class="btn btn-default btn-link">Right</button>
<button type="button" class="btn btn-default btn-link">Right</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to write a custom class so only the dropdown with the that class will display on hover.
Would be good if on hover would work on this tag:
<ul class="dropdown-menu dropdown-menu-large row col-md-12">
Can a CSS guru help me out?
Just change li.dropdown:hover to li.dropdown.yourclass:hover.
I have to make an input-group-btn in twitter bootstrap with a dropdown-menu attached to it but the output image below shows that the btn-group is not of the same size with the input group.
Here is the html code:
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block glyphicon glyphicon-plus" onclick="searchStationTable();"></button>
</span>
</div>
</div>
</div>
Your problems are :
The button of dropdown-menu you have btn-sm class, it will decrease size of button http://getbootstrap.com/components/#btn-dropdowns-sizing
solution : remove btn-sm class
You are using glyphicon on the button.
solution : you can use span, i tag or else on button if using glyphicon http://getbootstrap.com/components/#glyphicons-how-to-use
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block" onclick="searchStationTable();">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
http://jsfiddle.net/1hm7thq5/
I want that the dropdown buttons also can go over the whole page like buttons with the class btn-block. Here my current code : http://jsfiddle.net/wLUkx/1/
Here the code:
<div class="btn-group">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
xx
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">xx</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">xx</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">xx</button>
</form>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
yyy
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">yyy</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">yyy</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">yyy</button>
</form>
</ul>
</div>
<form>
<input type="hidden" name="game" value="paint">
<button class="btn btn-large btn-block btn-primary" type="submit">paint</button>
</form>
Can anybody help me?
Add btn-block to <div class="btn-group">
<div class="btn-group btn-group-justified">
<button type="button" style="width:100%;" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">
actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="btn-group-justified">Separated link</li>
<li class="btn-group-justified">Separated link</li>
<li class="btn-group-justified">Separated link</li>
<li class="divider"></li>
<li class="btn-group-justified">Separated link</li>
</ul>
</div>
http://jsfiddle.net/wLUkx/14/ (but for twitter bootstrap 3.x verison)
The class 'btn-group' has a property of display:inline-block. Changing this to display: block should give you the desired effect.
add this to your css .btn-group{display:block;}
The problem isn't the buttons in that fiddle, its the containers. The 'btn-group' class is inline and it is making the buttons the minimum width they can be. You can either remove 'btn-group' from those containers or create a new class that makes them "width:100%;"
What worked for me was adding btn-block to both <div class="btn-group" and <a class="btn">
I discovered the solution here
<div class="btn-group btn-block">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
xx
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">xx</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">xx</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">xx</button>
</form>
</ul>
</div>