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.
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 want to put the View button on left and the add button on right, but next to each other. The 2 buttons are in different divs. How can I do this?
Demo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
The easy way is to add a float: left; to the first button container.
.btn-group {
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
You can put both buttons inside the same div, and use bootstrap classes "left" and "right":
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning right">Add</button>
</div>
You can use bootstrap row and column classes to avoid various resolution issues.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div id="rolecontainer">
<div id="addContainer">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
</div>
A better practice for this is to CSS both parent divs containing the button with
.div1, .div2 {
display: inline-block;
}
Having this will put them inline.
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>
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>