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

css twitter-bootstrap scrollable

I tried this method (their fiddle) to enable scrollable menu with Bootstrap, but with that approach, the scrollable menu expands its container -- fiddle -- the non-scrollable menu, correctly, does not do this.

How can I fix this? Suggestions on other approaches compatible with Bootstrap are appreciated too!

For reference, here is the HTML from the first method's fiddle:

<ul class="nav">
    <li class="dropdown">
        <a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
        "font-weight: bold"></a>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 1 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">User</a>
                            </li>

                            <li>
                                <a href="#">Administrators</a>
                            </li>

                            <li>
                                <a href="#">Some Other Group</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 2 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">Core Users</a>
                            </li>

                            <li>
                                <a href="#">Admin</a>
                            </li>

                            <li>
                                <a href="#">Some Other Role</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu footer -->
            </ul>
        </div>

        <ul class="dropdown-menu">
            <li class="disabled">
                <a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
            </li>
        </ul>
    </li>
</ul>

And the CSS:

/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
    position:relative;
    display:inherit!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    top:0!important;
    left:0!important;
    width:100%;
    height:auto;
    max-height:500px;
    margin:0;
    border-left:none;
    border-right:none;
    -webkit-border-radius:0!important;
    -moz-border-radius:0!important;
    -ms-border-radius:0!important;
    -o-border-radius:0!important;
    border-radius:0!important;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none
}

It also works for Bootstrap V4

For BS 3, 4 and 4.5 see this answer: stackoverflow.com/a/46891758/888472 as the accepted one is obsolete.

Zim

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

If one prefers Plunker over Bootply, here it is: plnkr.co/edit/3VhYW1?p=preview

The scrollbar cuts off some of the text. I'm wondering what the cleanest way is to increase the size to accommodate the widest item.

what about if i want fixed header and footers in dropdown menu

I used max-height: 100vh to give a 100% height

answer below that suggests to use .pre-scrollable should be the accepted anser

Adrian Hedley

You can use the built-in CSS class pre-scrollable in bootstrap 3 inside the span element of the dropdown and it works immediately without implementing custom css.

 <ul class="dropdown-menu pre-scrollable">
                <li>item 1 </li>
                <li>item 2 </li>

 </ul>

This should be the accepted answer for Bootstrap 3 and 4 and 4.5

You probably also want to add a style of overflow-y: auto to the ul so that the scroll bar only shows up when it is needed, otherwise this solution always adds a scrollbar to the menu, even when it isn't needed

This won't work in Bootstrap 5 (starting from version 4.3). Reference: github.com/twbs/bootstrap/pull/29135

blalond

For CSS, I found that max height of 180 is better for mobile phones landscape 320 when showing browser chrome.

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

Also, to add visible scrollbars, this CSS should do the trick:

.scrollable-menu::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;        
}    
.scrollable-menu::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: lightgray;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);        
}

The changes are reflected here: https://www.bootply.com/BhkCKFEELL

Rajeshwar Reddy

Do everything in the inline of UL tag

<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
                <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>

Jilani A

I just fix this problem in my project-

CSS code

.scroll-menu{
   min-width: 220px;
   max-height: 90vh;
   overflow: auto;
 }

HTML code

<ul class="dropdown-menu scroll-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>

Darshak Malvi

i hope this code is work well,try this.

add css file.

.scrollbar {
    height: auto;
    max-height: 180px;
    overflow-x: hidden;
}

HTML code:

<div class="col-sm-2  scrollable-menu" role="menu">
    <div>
   <ul>
  <li><a class="active" href="#home">Tutorials</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

    </ul>
   </div>
   </div>

Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now

相似问题

Creating a two-column-100% layout with Bootstrap

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US