In bootstrap I want to have 2 dropdowns, Only the first one in the code works. Even if I copy and paste
<div class="dropdown" style="position: absolute; left: 30%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li><a href="comingsoon/index.html">Coming Soon!</h5></li>
</ul>
</div>
<div class="dropdown" style="position: absolute; left: 60%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li><a href="comingsoon/index.html">Coming Soon!</h5></li>
</ul>
</div>
(If i click the first one it opens the menu, if I click the second one it does nothing. These both are the same exact ones and do not work together)
The issue is that you have unclosed anchor tags. In two places you have </h5> in place of </a>. If you resolve that problem it works correctly.
<div class="dropdown" style="position: absolute; left: 30%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>Coming Soon!</li>
</ul>
</div>
Bootply
Related
I'm trying to make a down like bootstrap dropdown, but I want to make the div position dynamic, how can I do it according to the screen size?
When IAMBUTTON is clicked, jquery automatically writes the "transform: translate" I have specified below. Likewise, when I click on the "New dropdown" button that I want to do, I want transform: translate to be added.
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<button class="btn btn-icon btn-outline-secondary" type="button" id="dropdownMenuButton1001" data-bs-toggle="dropdown" aria-expanded="false">
IAMBUTTON
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1001">
<li class="dropdown-item">
<a tabindex="-1" href="#">HTML</a>
</li>
<li class="dropdown-item">
<a tabindex="-1" href="#">CSS</a>
</li>
<li class="dropdown-submenu dropdown-item" v-on:click="openMenu">
<a class="test dropstart" tabindex="-1" data-popper-placement="left-start">New dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu dropstart" data-popper-placement="left-start" style="transform: scale(1);">
<li class="dropdown-item">
<a tabindex="-1" href="#">2nd level dropdown</a>
</li>
<li class="dropdown-item">
<a tabindex="-1" href="#">2nd level dropdown</a>
</li>
</ul>
</li>
</ul>
</div>
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(1071px, -407px);
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 have created a dropdown menu but it is not working:
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
Menu
<ul class="dropdown-menu">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</li>
</ul>
</div>
I am using Bootstrap CSS framework and have included all the appropriate CSS and JS files. What am I doing wrong? While looking at other questions similar to mines, I haven't been able to figure it out.
One solution may be that you are not referencing the jquery.js source before bootstrap.js source
You're missing some key elements.
This is what your dropdown element should look like.
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
This goes with the dropdown-toggle class.
data-toggle="dropdown" aria-expanded="false"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;"> Menu <span class="caret"></span>
<ul class="dropdown-menu ">
<li>Tom
</li>
<li>Greg
</li>
<li>Jane
</li>
</ul>
</li>
</ul>
</div>
First mistake was a couple of quotation marks missing. On top of that, you are not following the syntax and classes listed here: http://getbootstrap.com/components/#dropdowns
Here is the correct version:
<div class="col-xs-6 col-md-4">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu
<span class="caret"></span>
</button>
<ul id="hld" class="dropdown-menu" style="margin-top:10px;">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</div>
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.