When the bootstrap 5 dropdown is activated, flex wrap functionality triggers vertical scrolling

Question

When the bootstrap 5 dropdown is activated, flex wrap functionality triggers vertical scrolling

Every time I click on the dropdown, it causes a vertical scroll instead of popping out like a regular dropdown. I want to maintain the horizontal scroll while fixing this issue.

Any suggestions on how to solve this problem?

Demo: https://jsfiddle.net/d3jy68q7/

HTML:

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container-fluid">
      <div class="nav-scroller bg-body" id="navbarsExample03">
        <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 2</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <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>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 5</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true"&
            gt;Link 6</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true"&
            >Link7</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true"&
            >Link8</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

CSS:

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
  background-color:#212529 !important;
}
.nav-scroller .nav {
  display:flex;
  flex-wrap:nowrap;
  padding-bottom:1rem;
  margin-top:-1px;
  overflow-x:auto;
  text-align:center;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.navbar nav.nav-link,.navbar-nav.nav-link.active,.navbar-nav.nav-link.show{
  color:#fff;
}

css twitter-bootstrap flexbox bootstrap-5

Answer 1

Answer №1

The reason for the scrollbar appearing is due to the overflow of the dropdown's parent container when it opens, as its overflow-y property is not set to hidden. This causes the dropdown menu to be hidden behind the parent's parent container that has overflow set to hidden.

To ensure the dropdown menu shows properly, you can move it out of containers with hidden overflow.

This can be achieved using JavaScript by getting the position of the dropdown container and assigning it to the dropdown menu. Add the height of the dropdown to the top position to place it at the bottom. Additionally, use a fixed position so it can pop out of the overflow-hidden containers. You can also add a scroll listener to adjust the menu accordingly.

Here's an example:

const myDropdown = document.querySelector('.dropdown');

function adjustDropdownMenu(event) {

  requestAnimationFrame(() => {

    const dropdownContPos = myDropdown.getBoundingClientRect();

    document.querySelector(".dropdown-menu").style.cssText = `
        position: fixed;
        left: ${dropdownContPos.left}px;
        top: ${dropdownContPos.height + dropdownContPos.top}px;
    `;
  });
}

myDropdown.addEventListener('show.bs.dropdown', adjustDropdownMenu);
document.querySelector('.navbar-nav').addEventListener('scroll', adjustDropdownMenu);

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="nav-scroller bg-body" id="navbarsExample03">
      <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        ... (additional nav items)
      </ul>
    </div>
  </div>
</nav>

For Multiple Dropdowns:

If you have multiple dropdowns, loop through each one to assign event listeners. Pass the dropdown element, get its position, and assign it to the dropdown menu. On scroll, find the currently opened dropdown, get its parent element position, and update the dropdown menu accordingly.

const dropdowns = document.querySelectorAll('.nav-scroller .dropdown');

function position(dropdownMenu, containerPos) {
  dropdownMenu.style.cssText = `
            position: fixed;
            left: ${containerPos.left}px;
            top: ${containerPos.height + containerPos.top}px;
        `;
}

... (adjustOnScroll and adjustDropdownMenu functions)

dropdowns.forEach(dropdown => {
  dropdown.addEventListener('show.bs.dropdown', adjustDropdownMenu(dropdown));
});

document.querySelector('.navbar-nav').addEventListener('scroll', adjustOnScroll);

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="nav-scroller bg-body" id="navbarsExample03">
      <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        ... (additional nav items)
      </ul>
    </div>
  </div>
</nav>

Answer 2

The reason for the scrollbar appearing is due to the overflow of the dropdown's parent container when it opens, as its overflow-y property is not set to hidden. This causes the dropdown menu to be hidden behind the parent's parent container that has overflow set to hidden.

To ensure the dropdown menu shows properly, you can move it out of containers with hidden overflow.

This can be achieved using JavaScript by getting the position of the dropdown container and assigning it to the dropdown menu. Add the height of the dropdown to the top position to place it at the bottom. Additionally, use a fixed position so it can pop out of the overflow-hidden containers. You can also add a scroll listener to adjust the menu accordingly.

Here's an example:

const myDropdown = document.querySelector('.dropdown');

function adjustDropdownMenu(event) {

  requestAnimationFrame(() => {

    const dropdownContPos = myDropdown.getBoundingClientRect();

    document.querySelector(".dropdown-menu").style.cssText = `
        position: fixed;
        left: ${dropdownContPos.left}px;
        top: ${dropdownContPos.height + dropdownContPos.top}px;
    `;
  });
}

myDropdown.addEventListener('show.bs.dropdown', adjustDropdownMenu);
document.querySelector('.navbar-nav').addEventListener('scroll', adjustDropdownMenu);

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="nav-scroller bg-body" id="navbarsExample03">
      <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        ... (additional nav items)
      </ul>
    </div>
  </div>
</nav>

For Multiple Dropdowns:

If you have multiple dropdowns, loop through each one to assign event listeners. Pass the dropdown element, get its position, and assign it to the dropdown menu. On scroll, find the currently opened dropdown, get its parent element position, and update the dropdown menu accordingly.

const dropdowns = document.querySelectorAll('.nav-scroller .dropdown');

function position(dropdownMenu, containerPos) {
  dropdownMenu.style.cssText = `
            position: fixed;
            left: ${containerPos.left}px;
            top: ${containerPos.height + containerPos.top}px;
        `;
}

... (adjustOnScroll and adjustDropdownMenu functions)

dropdowns.forEach(dropdown => {
  dropdown.addEventListener('show.bs.dropdown', adjustDropdownMenu(dropdown));
});

document.querySelector('.navbar-nav').addEventListener('scroll', adjustOnScroll);

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="nav-scroller bg-body" id="navbarsExample03">
      <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        ... (additional nav items)
      </ul>
    </div>
  </div>
</nav>

Answer 3

Answer №2

There is no horizontal scrolling in the scenario you provided.

To eliminate the scrolling effect, you can remove the overflow property from both the .nav-scroller and .nav-scroller .nav selectors :

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  /* overflow-y: hidden; */
  background-color: #212529 !important;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  /* overflow-x: auto; */
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}

By replicating the changes mentioned above, your navbar should no longer have the scrolling behavior.

If you wish to view a demonstration of this solution, click on this working demo link

Answer 4

There is no horizontal scrolling in the scenario you provided.

To eliminate the scrolling effect, you can remove the overflow property from both the .nav-scroller and .nav-scroller .nav selectors :

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  /* overflow-y: hidden; */
  background-color: #212529 !important;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  /* overflow-x: auto; */
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}

By replicating the changes mentioned above, your navbar should no longer have the scrolling behavior.

If you wish to view a demonstration of this solution, click on this working demo link

When the bootstrap 5 dropdown is activated, flex wrap functionality triggers vertical scrolling

Answer №1

Answer №2

Similar questions

I require displaying the initial three letters of the term "basketball" and then adding dots

Is there a way to automatically scroll to the bottom of a div when it first

Display a single image on each slide when viewing Media Slider Carousel BS3 on a mobile device

Issue with scrollable multilevel dropdown menu

Data displayed in a table-like format

Designing a visually appealing widget in a jQuery UI theme by floating two elements neatly inside

What is the best way to insert an HTML data attribute string into a SCSS mixin using attr()?

Issue with Bootstrap dropdown menu not showing up/functioning

Utilize JavaScript to apply the CSS -moz-transition

Changing the class when a checkbox is selected using JQuery

Toggle sideBar within an iFrame by implementing Media Queries

Could Chrome be miscalculating em unit values in media queries?

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

Maintain the horizontal alignment of CSS floats

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Struggling to align the Bootstrap list-group container in the middle

Unwanted gap appears in the image slider

The column on the right does not extend all the way to the bottom of the page

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

Tips for creating a web page with rounded screen corners, similar to those on an Android smartphone