Scrollable Menu with Bootstrap – Menu expanding its container when it should not

by

Bootstrap 5 (update 2021)

The dropdown markup has changed for BS 5 as the data- attributes have changed to data-bs-. However, setting max-height still works to make the dropdown scrollable…

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

https://codeply.com/p/shJzHGE84z

Bootstrap 4 (update 2018)

The dropdown markup has changed for BS 4 as the items have their own dropdown-item class. However, setting max-height still works to make the dropdown scrollable…

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Bootstrap scrollable dropdown

Alternative horizontal menu for Bootstrap 4 using flexbox

Bootstrap 3 (original answer)

I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..

CSS:

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

HTML

       <ul class="dropdown-menu scrollable-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Action</a></li>
            ..
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
       </ul>

Working example: https://codeply.com/p/ox7JC49vmT

More Related Contents:

  1. Working with CSS in React [closed]
  2. Bootstrap NavBar with left, center or right aligned items
  3. How to make Twitter Bootstrap menu dropdown on hover rather than click
  4. Remove padding from columns in Bootstrap 3
  5. Bootstrap Center Vertical and Horizontal Alignment
  6. Customizing Bootstrap CSS template
  7. How to use particular CSS styles based on screen size / device
  8. Remove gutter space for a specific div only
  9. How can I center elements horizontally or vertically with Twitter Bootstrap?
  10. How to set up fixed width for ?
  11. Modify twitter bootstrap navbar
  12. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  13. What is class=”mb-0″ in Bootstrap 4?
  14. Changing the width of Bootstrap popover
  15. How to change btn color in Bootstrap
  16. Bootstrap Center Navbar Items
  17. How to make Twitter bootstrap modal full screen
  18. bootstrap button shows blue outline when clicked
  19. Using twitter bootstrap 2.0 – How to make equal column heights?
  20. Make column fixed position in bootstrap
  21. Bootstrap: Position of dropdown menu relative to navbar item
  22. Set div height equal to screen size
  23. How to add a search box with icon to the navbar in Bootstrap 3?
  24. Styling twitter bootstrap buttons
  25. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  26. Twitter Bootstrap: div in container with 100% height
  27. How to make a Bootstrap 4 full width dropdown in Navbar?
  28. Bootstrap Navbar list items/links not showing
  29. Center a column using Twitter Bootstrap
  30. Bootstrap table striped: How do I change the stripe background colour?

Leave a Comment