How to add dropdowns in bootstrap - javascript

details about the questions
...........................................................................................
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<section style="background: aliceblue; width: 100%; height: 100px;" th:fragment="header">
<div class="btn-group">
<a href="http://localhost:8080">
<img src="logo.png" alt="Przejdź do strony głównej" width="80" style="padding: 10px">
</a>
<a style="padding: 20px" class="col-sm" th:href="#{/ordersCatalog}">Zamówienia klientów</a>
</div>
<div class="btn-group">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-bs-toggle="dropdown" aria-expanded="false">
Klienci
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" th:href="#{/listClient}">Lista klientów</a></li>
<li><a class="dropdown-item" th:href="#{/addClient}">Dodawanie klientów</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2"
data-bs-toggle="dropdown" aria-expanded="false">
Części
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
<li><a class="dropdown-item" href="#{/partsCatalog}">Katalog części</a></li>
<li><a class="dropdown-item" href="#{/addPart}">Dodawanie części do katalogu</a></li>
</ul>
</div>
<div class="btn-group">
<a style="padding: 20px" class="col-sm" th:href="#{/contact}">Kontakt</a>
<a href="http://localhost:8080/cart">
<img src="cart.png" alt="Koszyk" width="80" style="padding: 10px">
</a>
</div>
</section>
<div class="card-footer" style="position:absolute; bottom:0; background: aliceblue; width: 100%; height: 50px; "
th:fragment="footer">
<a href="http://localhost:8080">
<img src="logo.png" alt="Przejdź do strony głównej" width="80">
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Dropdowns don't work. I don't know how to fix it. I want to display one button with dropdowns
Title
Zamówienia klientów
Klienci
Lista klientów
Dodawanie klientów

Lifted from bootstrap docs -
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Add the link above in head of your html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Add the script above on the bottom of <body> before the closing </body> tag
Button dropdown below
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Zamówienia klientów Klienci
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lista klientów</a>
<a class="dropdown-item" href="#">Dodawanie klientów</a>]
</div>
</div>

Related

How to enter bootstrap javascript?

Hello I have a problem with bootstrap. I created dropmenu and now it's not working. I use CDN to install bootstrap. Css bootstrap works, but javascript not working. I don't know where is problem. I will grateful if some help me resolve this problem. I don't know where is problem.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MessBox</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style/search.css" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-xl" id="menu">
<form class="form-inline" action="search.php" method="post">
<div class="md-form active-cyan active-cyan-2">
<input class="form-control mr-3 mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
</div>
<button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
<button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1 d-flex justify-content-end">
<li class="nav-item dropdown" id="panelMenu">
<a class="nav-link dropdown-toggle mr-2"
id="navbarDropdownMenuLink-333"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user mr-2"></i>
Panel
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-default"
aria-labelledby="navbarDropdownMenuLink-333">
<a class="dropdown-item" href="statistics.php">Statystyki</a>
<a class="dropdown-item" href="account.php">Ustawienia konta</a>
<a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
<a class="dropdown-item" href="logout.php">Wyloguj się</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="js./bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</body>
</html>
nbcgbvbvvv b vbvbbvbbvb
I replaced this line <script src="js./bootstrap.min.js"></script>, Test it like this and tell me :
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MessBox</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/style/search.css" type="text/css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-xl" id="menu">
<form class="form-inline" action="search.php" method="post">
<div class="md-form active-cyan active-cyan-2">
<input class="form-control mr-3 mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
</div>
<button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
<button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between">
<li class="nav-item bg-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->profileUrl()) ?>">
<i class=" fas fa-user mr-2"></i>
Profile
</a>
</li>
<li class="nav-item bg-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->photoUrl()) ?>">
<i class=" far fa-images mr-2"></i>
PhotoView
</a>
</li>
<li class="nav-item bg-mat text-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->notificationUrl()) ?>">
<i class="fas fa-bell mr-2"></i>
Notification
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1 d-flex justify-content-end">
<li class="nav-item dropdown" id="panelMenu">
<a class="nav-link dropdown-toggle mr-2"
id="navbarDropdownMenuLink-333"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user mr-2"></i>
Panel
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-default"
aria-labelledby="navbarDropdownMenuLink-333">
<a class="dropdown-item" href="statistics.php">Statystyki</a>
<a class="dropdown-item" href="account.php">Ustawienia konta</a>
<a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
<a class="dropdown-item" href="logout.php">Wyloguj się</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</body>
</html>

Pure javascript collapse navbar

i'm using bootstrap 4 frameWork acccording to documentantion from https://getbootstrap.com/docs/4.5/components/navbar/ the navbar and it's contents use Collapse JavaScript plugin by adding a class .collapse.navbar-collapse to collapse on small screen includes smartphones , etc
here is the working Demo
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
One thing comes on my Mind is to find the solution to make Collapsible Navbar (from example above) by using Pure / Vanilla Js (no jquery)
here is what i'm trying to do but it is not working
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav id = "nav" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick = "toggleNav();">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapse" class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script>
let nav = document.getElementById('nav');
navHeight = nav.offsetHeight;
collapse= document.getElementById('collapse');
collapseHeight = collapse.offsetTop - collapse.offsetTop;
collapse.style.height = collapseHeight;
toggle = true ;
function toggleNav(){
if(toggle){
collapse.style.height = navHeight;
}else{
collapse.style.height = collapseHeight;
}
toggle = !toggle;
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Like this?
let nav = document.getElementById('collapse');
function toggleNav() {
nav.classList.toggle('show');
}
Example:
#nav .navbar-collapse {
max-height: 1500px;
transition: max-height 0.90s ease-in;
overflow: hidden;
}
#nav .collapse:not(.show) {
display: block;
max-height: 0;
transition: max-height 0.90s ease-out;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav id="nav" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="toggleNav();">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapse" class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script>
let nav = document.getElementById('collapse');
function toggleNav() {
nav.classList.toggle('show');
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Note: Of course, you will lose all the animation (it was inside jQuery).

overflow is sending dropdown behind the parent div while using li, z-index is not working

folks, I can't seem to figure out why overflow is breaking the code
so below code works fine in two conditions.
a) if I remove overflow-x and overflow-y from .bs-exmple or
b) if I remove ul and li
but I need both in my code, however with these css and ul and li being in code, the dropdown collapses behind the div. what am i missing
.bs-example { border: 1px solid black; overflow-y: scroll; overflow-x: hidden; min-height: 100px; max-height: 250px; }
.bs-example .dropdown { position: absolute; z-index: 999; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="bs-example">
<ul class="list-group ">
<li class="list-group-item m-3 p-3">User 1
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</li>
<li class="list-group-item m-3 p-3">User 2
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu2
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</li>
</ul>
</div>
</div>
so you see, the image below shows the dropdown behind the div
I have codepen saved here
https://codepen.io/ozzie6935/pen/NEZBwW?editors=1100
any help is much appreciated

Bootstrap dropdown button disappears after clicking it

The button which should unhide the dropdown menu actually hides the dropdown button instead. Also, I have one more dropdown menu in this navigation and it works perfectly fine.
<div class="side-nav pull-right">
<div class="dropdown">
<button type="button" class="profile dropdown-toggle" data-toggle="dropdown" id = "dropdownMenuButton" aria-haspopup="true" aria-expanded="false">Bonjour Arthur K. <img src = "images/triangle.png" alt =""/> </button>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuButton">
Utilisateurs
Snippets
Traductions
</div>
</div>
Mon compete
</div>
check this working example.. for more read this
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>

Bootsrap 4 Dropdown Not showing all the links in dropdown-menu

bootstrap 4 drop down is not showing all the links in dropdown-menu please refer image
its not showing beyond red band , is there something i missing cant figure out that
.red-block{
height: 220px;
background-color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
**
So link 3 is not visible , can someone correct this ?
Can u present your full code. Anyways, please try my code and see if it helps. I have replaced your div and anchor to ul - li - anchor structure.
let me know if it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>
Try adding this in your css.
i dont know this will work inside your html file or not.
.dropdown-menu{
postition: relative;
z-index:-1
}
Sometimes this happens when you try to display an element outside of a container/element that is overflow: hidden
Ex:
.red-block{
overflow: hidden;
background-color: red;
height: 220px;
}
What you could do is 1. Check if any there's any overflow: hidden element and change it or 2. move the .dropdown element right next to the div.red-block like this:
HTML
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<!-- RED BLOCK -->
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
</div>
<!-- END RED BLOCK
DROPDOWN -->
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
<!-- END DROPDOWN -->
CSS
.red-block{
background-color: red;
height: 220px;
}
.dropdown.ml-20{
position: absolute;
bottom: 25%;
}
Hope it helps

Categories