I am new to bootstrap and created a website with that but my dropdown menu didn't work right it open "out of the window" so anyone can help me with that? I've tried a lot with classes but it didn't work...
https://i.imgur.com/DbjKm3U.png
my code:
<div class='dropdown'>
<button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown'>
<img class='rounded-circle float-right' height='45px' src='$profileimgurl' />
</button>
<ul class='dropdown-menu pull-left' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
</div>
The default behavior of Bootstrap's Dropdown Component is to align to the bottom left margin of whatever object triggered it. To override this behavior you apply dropdown-menu-right to the dropdown-menu. To use your own code as an example:
<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
It is unclear whether you are using Bootstrap 3.x or Bootstrap 4.x, but in the latter you can also apply responsive behavior to this class (ie. .dropdown-menu-lg-right to better modify your UI on different devices or screens.
This Technique only work on Bootstrap 4
This is not problem bro, its default behavior of dropdowns but for solving this situation you need to use dropdown-menu-right class, for more info go to this link.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Related
I can't get this menu to show horizontal, I want it to show like the one on w3Schools (enter their page, and above, in the navbar there is an option with "MORE", so when you click it, it shows a big menu with many a lot of options.)
The CSS is the simple Bootstrap default one.
I can't get mine to do so. Here is the code I'm using:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Extra Verification <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Provides Address, Status, Previous Names</li>
<li>Connecticut </li>
<li>Georgia </li>
<li>Louisiana</li>
<li>Vermont</li>
<li>New Mexico</li>
<li class="divider"></li>
<li class="dropdown-header">Provides Address and Status</li>
<li>Alabama</li>
<li>Alaska</li>
<li>Arkansas</li>
<li>Arizona</li>
<li>California</li>
<li>Colorado</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Maryland</li>
</ul>
</div>
So if I'm understanding correctly, you want the dropdowns to appear/disappear on click? You need jQuery to do that. With CSS you can make them appear/disappear on hover but not toggle on clicking.
You have to include jQuery and Bootstrap JavaScript into your page:
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Extra Verification
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Provides Address, Status, Previous Names</li>
<li>Connecticut </li>
<li>Georgia </li>
<li>Louisiana</li>
<li>Vermont</li>
<li>New Mexico</li>
<li class="divider"></li>
<li class="dropdown-header">Provides Address and Status</li>
<li>Alabama</li>
<li>Alaska</li>
<li>Arkansas</li>
<li>Arizona</li>
<li>California</li>
<li>Colorado</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Maryland</li>
</ul>
</div>
</body>
</html>
See the image above - I have Bootstrap dropdowns on the left, and buttons on the right. They're nicely aligned, but I'd like to move the pagination up so it's in between them to make better use of the space. Now currently the pagination code is further down, but if I move it between the dropdowns and buttons, it causes what you see in the second image. How can I have everything aligned?
Bootiply here: http://www.bootply.com/5Ufnpj317Z
EDIT:
please find attached images and do changes as per red area.
I've rearranged a fair bit of your code, summarised as follows:
introduced bootstrap container and rows
removed panel-body class
removed pull-right class from the buttons on the right
added test.css for some custom adjustments
fixed indenting
It looks ok an a wide screen, but elements will stack on top of each other on smaller screens.
/*test.css*/
#dropdownMenu1-div{
display:inline;
}
#dropdownMenu2-div{
display:inline;
}
.pagination{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2 class="text-center">Browse</h2>
<hr class="no-bottom-pad">
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="dropdown inline-control" id="dropdownMenu1-div"">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Location:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>all</li>
<li class="divider"></li>
<li>London Waterloo</li>
<li>London Waterloo 3F workshop</li>
<li>London Waterloo comms room</li>
</ul>
</div>
<div class="dropdown inline-control" id="dropdownMenu2-div">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Type:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>all</li>
<li class="divider"></li>
<li>Laptop</li><li>Chromebook</li>
<li class="divider"></li>
<li>HP</li>
<li>Lenovo</li>
<li>Toshiba</li>
<li class="divider"></li>
<li>HP Brilliance 5000</li>
<li>Lenovo B50-70</li>
<li>Toshiba Portege R930</li>
</ul>
</div>
</div>
<div class="col-xs-2" id="page-numbers">
<!-- <p class="no-bottom-pad">136 laptops</p> -->
<ul class="pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="col-xs-7">
<a href="#" id="add-laptop-btn" class="btn btn-default" onclick="laptop_modal('new')">
Add Laptop
</a>
<input id="add-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
<a href="#" id="add-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();">
Add Multiple ->
</a>
<input id="earmark-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
<a href="#" id="earmark-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();">
Earmark Multiple ->
</a>
</div>
</div>
</div>
</body>
</html>
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.
I'd like to know how can i build a btn-group with a sub-menu.
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
and i' like to put this in the btn-group:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
This is what i want: (but with twiiter-bootstrap)
Explanation: Basically this btn could go anywhere, I just put it in a button group to show there is nothing special about this button.
So first, you want to add data-toggle= dropdown to your button. Then, you need to add your standard drop down menu to the button. I guess the key here is knowing that there is nothing stopping you from adding a second dropdown menu into a submenu.
So go a head an add a submenu into whatever < li > you want, and inside that, just another dropdown-menu. So essentially we have Button -> dropdown menu -> dropdown submenu -> dropdown menu -> sub elements. Alittle confusing but pretty straight forward I think
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<!--start of dropdown button -->
<button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
</ul>
</li>
</ul>
</div>
<!--end of dropdown button -->
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
Edit:
After playing with this alittle, I realized that you do need the
<div class="btn-group">
wrapping the button, even if it is going to just stand alone. I created this updated fiddle to demo it.
http://jsfiddle.net/jamiematthews/yWrRA/1/
Took a bit of experimenting but here's how you go about doing it:
http://jsfiddle.net/ewQTE/2/
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropwn Link #1</li>
<li>Dropwn Link #2</li>
</ul>
</div>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
I want to implement twitter bootstrap dropdown menu, here's my code:
<span class="dropdown">
</b>
<ul class="dropdown-menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li class="divider"></li>
<li>d</li>
</ul>
Dropdown works good, my dropdown is placed next to right edge of the screen and when I click my dropdown-toggle, the list goes outside the screen. It looks like on the screen:
How can i fix it?
adding .pull-right to ul.dropdown-menu should do it
Deprecation Notice: As of Bootstrap v3.1.0, .pull-right on dropdown menus is deprecated. To right-align a menu, use .dropdown-menu-right.
Deprecation Notice 2: As of Bootstrap v5, .dropdown-menu-right is deprecated. For Bootstrap v5, use .dropdown-menu-end.
Since Bootstrap v3.1.0 adding .pull-right is deprecated on dropdown menus. A .dropdown-menu-right should be added to ul.dropdown-menu instead. Docs
For Bootstrap 4, adding dropdown-menu-right works. Here's a working example..
http://codeply.com/go/w2MJngNkDQ
a solution that does not need modifying the HTML only the CSS is
li.dropdown:last-child .dropdown-menu {
right: 0;
left: auto;
}
Its particularly usefull for dynamically generated menus where its not always possible to add the recommended class dropdown-menu-right to the last element
You can use class .dropdown-pull-right with following css:
.dropdown-pull-right {
float: right !important;
right: 0;
left: auto;
}
.dropdown-pull-right>.dropdown-menu {
right: 0;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="dropdown dropdown-pull-right btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Open Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
in Bootstrap 4 you can use .dropleft
just change to :
<span class="dropleft">
or
add .dropdown-menu-{lg,med,sm,xs}-right to your dropdown-menu
<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
float-*-right for Bootstrap 4
* = xs, sm, md, lg
I can't leave a comment because my SO level is too low, but I just made sure that the parent container is set to "overflow:hidden" like so (also make sure position is set).
<div style="overflow:hidden;position:relative">
<span class="dropdown">
</b>
<ul class="dropdown-menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li class="divider"></li>
<li>d</li>
</ul>
</div>
If you are using Bootstrap 5, according to documentation:
Dropright:
Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
I encountered this issue recently, and I solved it by addind display="dynamic" to my ngbDropdown (using Angular 12, ngBootstrap 10 and Bootstrap 4):
<div class="row">
<div class="col">
<div ngbDropdown display="dynamic" class="d-inline-block dropdown-menu-right">
<button class="btn btn-outline-primary" id="navbarDropdownForm" ngbDropdownToggle>Sign in</button>
<div ngbDropdownMenu aria-labelledby="navbarDropdownForm">
<form class="px-4 py-3">
<div class="form-group">
<label for="navbarDropdownFormEmail">Email address</label>
<input type="email" class="form-control" id="navbarDropdownFormEmail" placeholder="email#example.com"
autocomplete="username">
</div>
<div class="form-group">
<label for="navbarDropdownFormPassword">Password</label>
<input type="password" class="form-control" id="navbarDropdownFormPassword" placeholder="Password"
autocomplete="current-password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<button ngbDropdownItem>New around here? Sign up</button>
<button ngbDropdownItem>Forgot password?</button>
</div>
</div>
</div>
</div>