Bootstrap 5: Dropdown auto close won't work - dropdown

I have an issue about auto closing with bootstrap 5 (never tried with previous versions). I always have the default behaviour. I tried with Chromium and Safari (...).
To investigate, I started back, copying the code in https://getbootstrap.com/docs/5.0/components/dropdowns/#auto-close-behavior, but the same default behaviour for all dropdown arises.
I checked that I have bootstrap.bundle.min.js loaded so it's not a problem of Popper import (other behaviors such as positionning are working anyway).
As an exemple, here is some complete code I have some issue with. It's a simple copy of the mentioned site.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Codeply">
<title>Codeply simple HTML/CSS/JS preview</title>
<base target="_self">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css">
<style>/* build your own custom Bootstrap theme:
https://themestr.app
*/</style>
</head>
<body>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>


You are using beta(5.0.0-beta1) version of bootstrap 5. It is not stable version.
It is working fine with latest bootstrap version 5.1.3. Please use & try latest bootstrap version. check following.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Related

Bootstrap's Navbar Dropdown Link won't work

I am using Bootstrap 5 with my Navbar. I have two Dropdown Links for my site and whenever I try to click on the page that holds them (ex. Reviews), it doesn't work. I don't believe I'm missing any Bootstrap links or jQuery to make the Dropdown work.
<div class="container-fluid"> <a class="navbar-brand" href="index.html"><img src="images-logo/logo.png" alt="Game Picker"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" aria-current="page" href="news.html">News</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" aria-current="page" href="previews.html" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Previews </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" aria-current="page" href="#">Action</a></li>
<li><a class="dropdown-item" aria-current="page" href="#">Another action</a></li>
<li><a class="dropdown-item" aria-current="page" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" aria-current="page" href="reviews.html" id="navbarDropdownMenuLinkTwo" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reviews </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkTwo">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li></div></div></nav>

dropdown doesn't obey centering

I am trying to get a series of controls positioned vertically and centered horizontally. The controls are coming out fine, but when I cause the dropdown to drop down, the dropdown text appears left justified on the screen rather than under the centered dropdown control. I've spend a couple of hours on it and I can't get it right. Help would surely be appreciated. Here is what I am using:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;">
</div>

You could solve this issue using css like i did here:
http://www.bootply.com/zck8H4EVt4
Just add this to your CSS:
.dropdown-menu {
left: 50%;
transform: translate(-50%, 0);
}
// EDIT:
Sorry, i've forgot about the btn-group class...
Just remove the CSS part from the first solution, add .btn-group to your dropdown and use .clearfix after your btn-group like i did here:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<div class="clearfix"></div>
<input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off">
</div>
Working example: http://www.bootply.com/lryEFqtmdp

Aligning Form button within nav bar

I am a bit stuck with how to properly align a button on a nav-bar, where the button is wrapped inside a form.
Here is the markup I have (and here is a jsfiddle if its easier: https://jsfiddle.net/darrelltunnell/DTcHh/24292/)
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
Test
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>One </li>
<li>Two </li>
<li>Three </li>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">
<span class="fa fa-user"></span>
Daz
</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
The problem is that both the anchor and the button (within the form) are not aligning correctly with the other nav items.
Any pointers much appreciated.

You should use <ul> tag like this:
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<ul>
<li>Item3</li>
<li>Item4</li>
</ul>
Your Code:
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"> Test </span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">
Logout
</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
</nav>

Multiple drop-downs not working in bootstrap

Multiple dropdowns are not working for me in bootstrap. Can you tell me what is wrong with it?
Here is my drop down code :
$(function(){ $(".dropdown-menu li a").click(function(){ $(".btn:first-child").text($(this).text()); $(".btn:first-child").val($(this).text()); }); });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="btn-group" data-target="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-plus-sign"></i> <span class="caret"></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 class="btn-group" data-target="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>LMN</li>
<li>AA</li>
<li>BB</li>
<li class="divider"></li>
<li>EE</li>
<li>DD</li>
<li>WW</li>
<li>YY</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Try this:
$( ".dropdown-menu li a" ).click(function(){
$(this).parent().parent().parent().find( ".btn" ).text($(this).text());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="btn-group" data-target="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-plus-sign"></i> <span class="caret"></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 class="btn-group" data-target="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>LMN</li>
<li>AA</li>
<li>BB</li>
<li class="divider"></li>
<li>EE</li>
<li>DD</li>
<li>WW</li>
<li>YY</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

dropdown wont drop on mobile screen

I have a dropdown which i need to keep the url intact on the parent so i put disable class, but when i open it on my mobile, it immediately goes to the url and it wont drop. Here's the code.
<div class="row">
<nav class="navbar navbar-default polo" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#polo-nav">
<span class="sr-only">
</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="polo-nav">
<ul class="nav navbar-nav">
<li class="dropdown">Accueil
<ul class="dropdown-menu">
<li>Activites</li>
<li>Infrastructures</li>
</ul>
</li>
<li class="dropdown">Tournois
<ul class="dropdown-menu">
<?php
$this->db->select('tou_name,id');
$this->db->where('trashed',0);
$this->db->from('tbl_tournament');
$query = $this->db->get();
foreach ($query->result() as $row)
{
?>
<li><?=$row->tou_name?></li>
<?php
}
?>
</ul>
</li>
<li><a class="polo-sub" href="<?=base_url()?>leclub.html">Le Club</a></li>
<li><a class="polo-sub" href="<?=base_url()?>schedule.html">Calendrier</a></li>
<li><a class="polo-sub" href="<?=base_url()?>polo/tarifs.html">Tarifs</a></li>
<li><a class="polo-sub" href="<?=base_url()?>polo/partenaires.html">Partenaires</a></li>
<li><a class="polo-sub" href="<?=base_url()?>actualities/actualities.html">Actualites</a></li>
<li><a class="polo-sub" href="<?=base_url()?>polo/contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>