Twitter bootstrap dropdown goes outside the screen - html

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>

Related

Ensuring div are placed below each other after the top div grows in size

I have two divs that represent a list of elements the user can click on on a search bar, followed by a "Done" button.
<div class="dropdown col" id="dropdown-search-id">
<input type="text" class="form-control dropdown-toggle" id="inputSearch" placeholder="Search for a term ">
<div class="col dropdown-menu" aria-labelledby="inputSearch">
<div id="search_list_container">
<ul id="inputSearchEntries">
<li id="searching_li" style="visibility:hidden">
<img src="{{static_dir}}/loader.gif" alt="Loading" style="width:15%"/>
</li>
</ul>
</div>
<div id="doneSearchButton" class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</div>
</div>
Whenever the user starts typing, there are a number of <li> elements that appear with an autocomplete function (that is, they are appended between the <ul> tag, but the position of the "Done" button is messed up, as it does not stay at the bottom, that is, below the list elements.
How can I keep the button always at the bottom of the list, regardless of how many elements there are?
See example below. I used your code, added a few <li> items, the data-bs-toggle and a class on the <ul> list so no bullets appear, and the buttons is where it should be.
So if your problem isn't solved with my example, post the full example of the dropdown, with the search results and including any custom CSS.
Other options:
Use the helper class float-end instead of using flex.
Place the btn inside the list: <ul><li>..</li><li><btn></li></ul>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown col" id="dropdown-search-id">
<input type="text" class="form-control dropdown-toggle" id="inputSesarch" data-bs-toggle="dropdown" aria-expanded="false" placeholder="Search for a term ">
<div class="col dropdown-menu form-control" aria-labelledby="inputSearch">
<div id="search_list_container">
<ul class="list-group" id="inputSearchEntries">
<li><a class="dropdown-item" href="#">First result</a></li>
<li><a class="dropdown-item" href="#">Another result</a></li>
<li><a class="dropdown-item" href="#">Some other result</a></li>
</ul>
</div>
<div id="doneSearchButton" class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</div>
</div>

boostrap dropdown menu align

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>

How to move Bootstrap pagination in-line with buttons

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>

Why is the ng-repeat directive failing to populate list items on a bootstrap dropdown?

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.

keeping search fixed in a dropdown menu

I created a dropdown menu with search option in angular JS. when i click on it, a dropdown menu with search option comes. But as i scroll down, search also becomes a part of scroll. I want it to be fixed and placed at position where i clicked.
Here is the code for the dropdown menu.
<div class="dropdown dropdown-scroll" style="margin-top:15px;" >
<button style="width:220px;" class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
{selected.ApplicationName}}
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<div class="input-group input-group-sm search-control" fixed>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<li role="presentation" ng-repeat='app in applicationArray | filter:query'>
<a ng-click="changeSelected(app)"> {{app.ApplicationName}} </a>
</li>
</ul>
</div>
The output is like this :
Now as i scroll, this search goes up and i cant see it anymore. Also, when i click on *select an application, i want the dropdown to be placed at that location where *select an application is there.
Try this fiddle
http://jsfiddle.net/kyrcha/ULSy3/6/
try this one
use navbar-fixed-top class with your search li
<li role="presentation" class="navbar-fixed-top">
<div class="input-group input-group-sm search-control" fixed>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
EDIT CODE :
I have updated fiddle.Please check it.
HTML :
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1 " ng-controller="ListCtrl">
<li><div class=" fixed-class input-group input-group-sm search-control "> <span class="input-group-addon ">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<ul class="presentation-li">
<li role="presentation" ng-repeat='item in items | filter:query'> {{item.name}}
</li>
</ul>
</ul>
CSS:
ul.presentation-li li{
list-style: none;
}
ul.presentation-li li a{
color: black;
text-decoration: none;
}
.fixed-class{
position: fixed;
border-width: 0 0 1px;
width : 141px;
top: 37px;
bottom : 35px;
background-color: white;
}
you can add a new css class where you fix high and you overflow-y property to scroll:
.anyClass {
height:150px !important;
overflow-y: scroll !important;
}
In your HTML code, for example you will have something like that:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<ul (click)="$event.stopPropagation()" class="dropdown-menu" aria-labelledby="dropdownMenuButton01">
<li>
<input type="text" class="form-control" placeholder="Search">
</li>
<div class="anyClass" >
<app-item-component *ngFor="let item of array"></app-item-component>
</div>
</ul>
</div>
The (click)="$event.stopPropagation()" I added just to stop closing the select window after picking an item.