Prerequisites
Describe the issue
When using Menus in a Drawer (for example, with a Navbar on mobile), the menu can appear such that menu items are unclickable in a couple different ways.
First, if the menu is longer than the dialog then the overflow is hidden. This is partially a result from the changes in #42629 since overflow: hidden was added and by default the .drawer-body has position: static so it does not act as a parent for the position: absolute used by the menu.
There's a relatively simple fix by adding position: relative to the .drawer-body without needing to revert #42629 (in the screenshot below, I can now scroll down to the end of the menu)
The second way this can appear is when the menu button is down several items and Floating UI decides to place the menu above the button, which causes the menu to overflow upwards and be hidden (note: this happens even with adding position: relative to .drawer-body, which is applied in the screenshot)
Using data-bs-strategy="fixed" does not fix the issue and data-bs-display="static" fixes that issue within the drawer but creates other issues by the menu covering the toggle button and having the menu overflow the window when using .navbar-expand.
Floating UI doesn't seem to realize that it's possible to expand the container to scroll and Bootstrap hard-codes the fallbacks to allow upwards placement (see _getFloatingPlacements() in js/src/menu.js. Since this is a middleware setting, this is also not easy to fix using data-bs-config="{}" (or if there is an easy way it's not clearly documented).
Reduced test cases
Use a mobile phone size (e.g. Pixel 2 in Chrome) in landscape orientation
Demo Code
The following assumes the v6-dev branch is cloned to a folder called "bootstrap"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- add extra padding to make the issue easier to demo -->
<style>.menu-item{--bs-menu-item-padding-y:0.5em;}</style>
</head>
<body class="d-flex flex-column min-vh-100">
<header class="sticky-top">
<nav class="navbar bg-2">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-fullscreen" tabindex="-1" id="navbarNav">
<div class="drawer-header">
<p class="drawer-title">Navbar</p>
<button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link" role="button" data-bs-toggle="menu" data-bs-placement="bottom-start" aria-expanded="false">The</a>
<div class="menu">
<a href="#" class="menu-item">quick</a>
<a href="#" class="menu-item">brown</a>
<a href="#" class="menu-item">fox</a>
<a href="#" class="menu-item">jumps</a>
<a href="#" class="menu-item">over</a>
<a href="#" class="menu-item">the</a>
<a href="#" class="menu-item">lazy</a>
<a href="#" class="menu-item">dog</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Lorem</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Sphinx</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" role="button" data-bs-toggle="menu" data-bs-placement="bottom-start" aria-expanded="false">Grumpy</a>
<div class="menu">
<a href="#" class="menu-item">wizards</a>
<a href="#" class="menu-item">make</a>
<a href="#" class="menu-item">a toxic</a>
<a href="#" class="menu-item">brew</a>
<a href="#" class="menu-item">for the</a>
<a href="#" class="menu-item">evil Queen</a>
<a href="#" class="menu-item">and Jack</a>
</div>
</li>
</ul>
</div>
</dialog>
</div>
</nav>
</header>
<script type="module" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox
What version of Bootstrap are you using?
v6-dev
Prerequisites
Describe the issue
When using Menus in a Drawer (for example, with a Navbar on mobile), the menu can appear such that menu items are unclickable in a couple different ways.
First, if the menu is longer than the dialog then the overflow is hidden. This is partially a result from the changes in #42629 since
overflow: hiddenwas added and by default the.drawer-bodyhasposition: staticso it does not act as a parent for theposition: absoluteused by the menu.There's a relatively simple fix by adding
position: relativeto the.drawer-bodywithout needing to revert #42629 (in the screenshot below, I can now scroll down to the end of the menu)The second way this can appear is when the menu button is down several items and Floating UI decides to place the menu above the button, which causes the menu to overflow upwards and be hidden (note: this happens even with adding
position: relativeto.drawer-body, which is applied in the screenshot)Using
data-bs-strategy="fixed"does not fix the issue anddata-bs-display="static"fixes that issue within the drawer but creates other issues by the menu covering the toggle button and having the menu overflow the window when using.navbar-expand.Floating UI doesn't seem to realize that it's possible to expand the container to scroll and Bootstrap hard-codes the fallbacks to allow upwards placement (see
_getFloatingPlacements()injs/src/menu.js. Since this is a middleware setting, this is also not easy to fix usingdata-bs-config="{}"(or if there is an easy way it's not clearly documented).Reduced test cases
Use a mobile phone size (e.g. Pixel 2 in Chrome) in landscape orientation
Demo Code
The following assumes the
v6-devbranch is cloned to a folder called "bootstrap"What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox
What version of Bootstrap are you using?
v6-dev