Member Avatar for mmcdonald

Hi all,

I'm working on an old project of mine that I used to self-study PHP which used Bootstrap 2. Revisiting the project a year on I'm looking to restrict the max-height of dropdown.js but can't - for the life of me - get it done. The best solution would be to have an overflow: scroll; max-height: 450px; situation.

Checkout the dropdown menu in this example: you'll see that the menu item named 'dropdown' is far too big for the page. How can I limit the height of dropdown menu?

Thanks for any help - I thought I knew how to do it but I've tried everything I can think of.

Michael

Edited by mmcdonald
  • 2 Contributors
  • 2 Replies
  • 690 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by mmcdonald

Dani AI

Generated

Good call by and well spotted, — the right idea is to limit the menu element and let it scroll. The usual reasons the CSS appears to “do nothing” are: the rule was applied to the wrong element, another stylesheet (Bootstrap or theme) is overriding it, or an ancestor with overflow:hidden is clipping the absolutely positioned menu. Inspect the live DOM with devtools to confirm which element actually receives the menu items and target that one specifically.

A safe, non-global approach is to add a class to the specific menu and style only that menu (this avoids changing every dropdown site-wide). Example markup + CSS:

<ul class="dropdown-menu scrollable" id="accountMenu">
  <li><a href="#">…</a></li>
  ...
</ul>

#accountMenu.scrollable {
  max-height: 450px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smoother scrolling on iOS */
}

If you need the menu to fit the available viewport space (near page bottom, for example), compute a dynamic max-height when the menu opens. A small jQuery handler that runs on the toggle click and adjusts max-height works well with Bootstrap 2:

$(document).on('click', '#accountMenuToggle', function() {
  var $menu = $('#accountMenu.scrollable'), btn = $(this);
  setTimeout(function() {
    var btnBottom = btn.offset().top + btn.outerHeight();
    var avail = $(window).height() - btnBottom - 10;
    $menu.css('max-height', Math.max(80, Math.min(450, avail)) + 'px');
  }, 10);
});

Troubleshooting: if styles are ignored, increase selector specificity or check CSS load order (your custom CSS must come after Bootstrap). If the dropdown is clipped by a parent with overflow set, either remove that clipping or move/append the menu to body and reposition it. Prefer overflow:auto (not scroll) to avoid always-visible scrollbars, and test keyboard navigation to keep the menu accessible.

Recommended Answers

All 2 Replies

Member Avatar for mmcdonald

Brilliant Cereal thank you :) I did figure this out about 2 hours ago using overflow: scroll; and max-height: 450px; but was simply applying it to the wrong element, either due to Bank Holiday alcoholism or sheer tiredness! haha You're right however and that's a good find.

Kudos!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.