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;
}
Related
Whenever a dropdown item is clicked its color changes to white that makes the white text unreadable.
I've already tried this but the solution doesn't work for me. Here is my snippet
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Demo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Applications<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
<li>Communications</li>
<li>Environmental</li>
<li>General</li>
<li>Programmable</li>
</ul>
</li>
<li>Product Selector</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" style="background-color:#000;margin-top:15px; border-radius: 0">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" style="background-color:#000;margin-top:15px;border-radius: 0"><i class="glyphicon glyphicon-search" style="color:#fff;"></i></button>
</div>
</div>
</form>
</li>
<li><i class="glyphicon glyphicon-shopping-cart logo-small"></i></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-user logo-small"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a asp-area="Identity" asp-page="/Account/Login">Login</a></li>
<li><a asp-area="Identity" asp-page="/Account/Register">Register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I want the background of the active selection to be the same color as the dropdown item background. Thanks in advance!
This is the relevant selector.
Change it to whichever color you need. Updated example
.dropdown-menu > li > a:focus {
background-color: initial; /* Equivalent to background-color: transparent */
}
Bootstrap applies focus classes. You will need to override those as well.
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
/* Your styles here. */
}
But you've done it with the following CSS selector, .nav.navbar-nav li a:hover. Add to the selector you already have (if you want the same styles for hover and focus) for :focus.
.nav.navbar-nav li a:hover,
.nav.navbar-nav li a:focus {
/* Your existing styles. */
}
FWIW, the link to the other StackOverflow post you have is related to the Navbar, not Dropdowns.
I'm pretty new to bootstrap(using 3.3.7 version) and css and need to do some front-end editing of existing code.
I got the following code:
<nav class="navbar navbar-default">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Fields
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li style="list-style-type: none" ng-repeat="fieldObj in vm.gridOptions.columnDefs">
<input type="checkbox" ng-model="fieldObj.visible"> {{fieldObj.field}}
</li>
<li style="list-style-type: none">
<button ng-click="vm.refreshGrid()">OK</button>
</li>
</ul>
</div>
</div></nav>
which results with the following :
Can I control the white space surrounding the list elements ?
Thanks
You need to reset ul which by default takes browser specific styles
ul{
padding-left: 0;
}
Use
.dropdown-menu ul{
padding-left:3px;
}
instead the default padding-left:40px;
.dropdown-menu ul{
padding-left:3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Fields
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li style="list-style-type: none">
<input type="checkbox" ng-model="fieldObj.visible"> no
</li>
<li style="list-style-type: none">
<input type="checkbox" ng-model="fieldObj.visible"> yes
</li>
<li style="list-style-type: none">
<button ng-click="vm.refreshGrid()">OK</button>
</li>
</ul>
</div>
</div></nav>
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/
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 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.