I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items.
Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this?
I always want the dropdown to appear right below the button that toggles it.
Thanks
Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping)
<div class="dropdown">
<span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#topMenu.Name
</span>
<div class="dropdown-menu" style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
#foreach (var subMenu in topMenu.SubMenu)
{
<a class="dropdown-item" href="#Url.Content("~/" + subMenu.Url)">#subMenu.Name</a>
}
</div>
</div>
Bootstrap 4.1
There is a new "display" option that disables popper.js dropdown positioning. Use data-display="static" to prevent popper.js from dynamically changing the dropdown position...
Bootstrap 4.0
There are some issues with popper.js and positioning.
I've found the solution is to position-relative the .dropdown, and set it as the data-boundary="" option in the dropdown toggle:
https://www.codeply.com/go/zZJwAuwC5s
<div class="dropdown position-relative" id="dd">
<button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
...
</div>
</div>
The boundary is set to the id of the dropdown. Read more about data-boundary.
Related questions:
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Scrolling a dropdown in a modal in Bootstrap4
I achieved this in Bootstrap 4.3.1 by adding data-flip="false" to the dropdown element.
ex:
dropdown
ZimSystems got it almost right in Bootstrap 4.1. To disable the dropdown changing direction while open, aka. it's x-placement="bottom-end", you should use the "flip" option, instead of the "display" option.
Display static disables the positioning entirely, while flip only disables the LIVE checks, that flip the dropdown upside down, when you scroll towards the top of the screen.
In options, you can try to change dropupAuto : true to dropupAuto : false.
https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version
Related
I already have a dropdown with the following code:
note: class='bg_r' is in CSS for the background image (url) globe
<span class="bg_r">
Language: <a id="Lang" href="#">DropUp▲</a>
</span>
<div id="language_menu" class="lang_switch_panel">
<div class="lang_switch">
<ul>
<li>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
</div>
The output for above code is as shown in figure 1 below:
Now, I'm doing similar to that(above figure) using bootstrap 4.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag but of no use(its wrong method but i tried).
Following is the code I tried so far:
<span class="bg_r">
Language:
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<!--<span class="bg_r">Language:
<a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</a>
</span>-->
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
The output for the code using bootstrap is as shown in figure 2 below:
How can I override button type with (background) image to get output similar to figure 1?
Thanks in advance.
Add btn-link class to button
Additionally add these styles to center align it
.bg_r {
background-color: aqua;
display: inline-flex;
align-items: center;
}
or add these 2 classes d-inline-flex align-items-center to bg_r span
.bg_r {
background-color: aqua;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<span class="bg_r d-inline-flex align-items-center p-1">
Language:
<button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
You can also use bg-transparent on the button that will remove the background-color from button, but will not remove the focus styles when you click on the button ! So preferably add btn-link class to it only.
The above answer works, or you can also replace this line
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
by
Dropup
I needed a selector that doesn't collapse alongside the rest of the menu in a bootstrap v4 navbar. Got something working, too. See below.
It's a bit hacky as there are actually two language selectors, but one is hidden when the browser window is smaller than the lg-breakpoint in bootstrap. Opposite way round if it is larger than the lg-breakpoint obviously. It works fine - but there might be a more elegant way to do this.
What I don't like is that, when the nav collapses, clicking on the language selector expands the navbar by the height of the dropdown list. Obviously it has to as the language selector is wrapped in the collabsed "nav" - but I'd much rather it'd behave as it does with the lg and wider selector - there the dropdown extends beyond the navbar without changing the size of the navbar.
Is there any way around this?
See these images:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--navigation-->
<nav class="navbar sticky-top navbar-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Page Title</a>
<!--language selector for collapsed menu [hidden when viewport larger than medium]-->
<div class="d-lg-none ml-auto">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">🌐 Language</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Language 1</a>
<a class="dropdown-item" href="#">Language 2</a>
<a class="dropdown-item" href="#">Language 3</a>
</div>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
<!-- page user is looking at = "nav-link active"-->
<a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link 1</a>
<a class="nav-item nav-link" href="#">Link 2</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Team</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Another Link</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">An entirely different link</a>
</div>
</div>
<a class="nav-item nav-link" href="sponsor_us.php">Link 3</a>
<a class="nav-item nav-link disabled" href="#">inactive Link</a>
</div>
</div>
<!--language selector for expanded menu [hidden viewport size medium and down]-->
<div class="d-none d-sm-none d-md-none d-lg-block d-xl-block ml-auto">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">🌐 Language</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Language 1</a>
<a class="dropdown-item" href="#">Language 2</a>
<a class="dropdown-item" href="#">Language 3</a>
</div>
</li>
</ul>
</div>
</nav>
Edit: Here's a jsfiddle link - albeit for some reason that one doesn't use the bootstrap.css file I'd added in the resources. So the menu is white, not black :). You have to change the width of the window that displays the html to see the menu expanding and collapsing.
I know this is old, but this was the ONLY place I'd found this question asked.
Simple way:
css: .popout { position: absolute !important;}
now add popout class to you div that you no longer want to remain inside the navbar while the navbar is collapsed!
<style>
.popout { position: absolute !important;}
</style>
<html>
...
<div class="dropdown-menu dropdown-menu-right popout" ...>
<a class="dropdown-item" href="#">Language 1</a>
<a class="dropdown-item" href="#">Language 2</a>
<a class="dropdown-item" href="#">Language 3</a>
</div>
</html>
When viewing this from xs or sm viewport/screen sizes, and then clicking on my navbar toggler, it's pushing all the content, INCLUDING the header that the navbar-toggler is in, down the page to make room for the dropdown menus.
This appears to be different from Bootstrap 3 (as well as Bootstrap 4 alpha 5).
Any thoughts on how to stop doing this?
Here's the site to test...
https://test.wrestlestat.com/rankings/dual
Here's the code:
<button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
#*<li class="nav-item"><a class="nav-link" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual Comparison</a></li>*#
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="comparisonDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="comparisonDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual/Team</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetWrestlerComparisonSelectLink()">Wrestler</a>
#*<div class="dropdown-divider"></div>*#
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Perma</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="rankingsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rankings
</a>
<div class="dropdown-menu" aria-labelledby="rankingsDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetWrestlerRankingsAllLink()">Wrestler</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetDualRankingsLink()">Dual</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetTournamentRankingsLink()">Tournament</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="fantasyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="fantasyDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.PickEmRoutes.GetFantasyThisWeekLink()">Pick'Em</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyPoolRoutes.GetTourneyPoolHubLink()">Tourney Pool</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyProjectionRoutes.GetTourneyProjectionLink()">Tourney Projection</a>
</div>
</li>
</ul>
</div>
Why it happens?
The class sticky-top gives your navbar a position: sticky; which acts as a block element when you haven't scrolled yet. So when your navbar gets expanded it pushes all other block elements down.
Fix1 - pushes normal content down
Put this div: <div class="navbar-collapse collapse" id="navbarSupportedContent" style>...</div> at the end of your <nav>...</nav>, or above your input if you want the searchfield to be under the collapsed navbar.
Fix2 - doesn't push anything down
First do Fix1, then in your CSS add .sticky-top { position: fixed !important; }, Only do this if your not using sticky-top anywere else!, because when you don't scroll it acts like a block element so pushes its other content down. Also add some margin to your first container-fluid so its under the header again (cause the now fixed element doesn't take up space anymore) for example add classes pt-5 and mt-5 to them.
Im using the bootstrap navbar and its working fine, on mobile devices the toggle button appears and when this button is clicked it appears a dropdown with the correct menu items, just like the bootstrap default.
But i want also to have a menu item with the username that appears when a user has a session started, and when this menu item is clicked it appears also a dropdown menu with the items available to a user with a session initiated.
The menu items available to a user with a session initiated are:
<ul>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
Do you know how to use the bootstrap to create that dropdown menu with the above items for the user with a session start? So that when the menu item "Jan" is clicked apperas a dropdown menu with the items above using the bootstrap styles just like when the toggle button in mobile device is clicked it appears the dropdown with the menu items?
Working example wihout that part of show the dropdown menu items available for a user with a session initiated working properly: https://jsfiddle.net/eeeoft8n/3/
Please see the bootstrap docs, there are some great examples there.
you'll want to add the add the div with the dropdown-menu class and the necessary aria-toggle on the link to activate them.
.menu_container {
position: relative;
width: 100%;
}
div.dropdown-menu{
left:auto;
right:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.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/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="container-fluid px-0">
<nav class="navbar navbar-expand-md navbar-light">
Logo
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="menu_container">
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto d-flex align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="#">Item 0</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> Jan
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Delete brains</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
you might need to go fullscreen in order to get the full-width view instead of the mobile view
I'm a beginner and I'm trying to create a navbar on bootstrap 4 that changes it's display on a mobile device
On a full-width display, I want the
Logo (left aligned)
Links (left aligned)
Profile picture dropdown menu (right aligned)
On a tablet display, I want the
Logo (centred)
Links (left-aligned and collapsed into hamburger menu)
Profile picture dropdown menu (right aligned) - essentially unchanged
I have managed to achieve most of what I want, except when clicking the hamburger menu, the profile picture menu gets pushed down, which is not what I want.
https://www.bootply.com/6a0BWZivYL
My question is, how do I fix the profile picture dropdown menu to the right-side.
I have tried moving the code for navbar-collapse collapse after the profile picture, which works for when in tablet display, but produces undesirable results in full-width display. Namely that it is no longer right-aligned.
I haven't been able to find any specific examples of this online. The closest I have found https://bootsnipp.com/snippets/gmQR0. This difference is that I don't think I need two collapsible menus, just the 1 collapsible + 1 fixed dropdown menu.
In the given design you have kept profile UL below the button div navigation list.
Please place it before button and change the class from float-md-right to float-right.
Add float-left class to button to make alignment left.
Edit
First design the nav-bar for small screen, then add media queries for dropdown-link to float right.
<head>
<style>
#media(min-width:769px){
.drop-class{
position: absolute;
right: 20px;
}
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNavDropdown" aria-
controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="dropdown drop-class">
<a class="dropdown-toggle" href="#"
id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<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>
</div>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>