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

Question

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    lt ul class  nav  gt       lt li class  dropdown  gt           lt a class  icon-key icon-white  data-toggle  dropdown  href     style           font-weight  bold  gt  lt  a gt            lt div class  dropdown-menu  style  margin-left  2em  gt               lt ul class  dropdown-menu  gt                   lt  -- static non-scrollable menu header 1 -- gt               lt  ul gt           lt  div gt            lt div class  dropdown-menu  style  margin-left  2em  gt               lt ul class  dropdown-menu  gt                   lt li class  disabled  gt                       lt a href     gt  lt i class  icon-group  gt  lt  i gt   lt b gt My Groups lt  b gt  lt  a gt                   lt  li gt                    lt li gt                       lt div class  dropdown-menu scroll-menu scroll-menu-2x                      style  margin-left  2em  gt                           lt ul class  dropdown-menu scroll-menu scroll-menu-2x  gt                               lt li gt                                   lt a href     gt User lt  a gt                               lt  li gt                                lt li gt                                   lt a href     gt Administrators lt  a gt                               lt  li gt                                lt li gt                                   lt a href     gt Some Other Group lt  a gt                               lt  li gt                           lt  ul gt                       lt  div gt                        lt ul class  dropdown-menu scroll-menu scroll-menu-2x  gt                           lt  -- Additional menu items omitted for brevity -- gt                       lt  ul gt                   lt  li gt               lt  ul gt           lt  div gt            lt div class  dropdown-menu  style  margin-left  2em  gt               lt ul class  dropdown-menu  gt                   lt  -- static non-scrollable menu header 2 -- gt               lt  ul gt           lt  div gt            lt div class  dropdown-menu  style  margin-left  2em  gt               lt ul class  dropdown-menu  gt                   lt li class  disabled  gt                       lt a href     gt  lt i class  icon-user  gt  lt  i gt   lt b gt My Roles lt  b gt  lt  a gt                   lt  li gt                    lt li gt                       lt div class  dropdown-menu scroll-menu scroll-menu-2x                      style  margin-left  2em  gt                           lt ul class  dropdown-menu scroll-menu scroll-menu-2x  gt                               lt li gt                                   lt a href     gt Core Users lt  a gt                               lt  li gt                                lt li gt                                   lt a href     gt Admin lt  a gt                               lt  li gt                                lt li gt                                   lt a href     gt Some Other Role lt  a gt                               lt  li gt                           lt  ul gt                       lt  div gt                        lt ul class  dropdown-menu scroll-menu scroll-menu-2x  gt                           lt  -- Additional menu items omitted for brevity -- gt                       lt  ul gt                   lt  li gt               lt  ul gt           lt  div gt            lt div class  dropdown-menu  style  margin-left  2em  gt               lt ul class  dropdown-menu  gt                   lt  -- static non-scrollable menu footer -- gt               lt  ul gt           lt  div gt            lt ul class  dropdown-menu  gt               lt li class  disabled  gt                   lt a href     gt  lt i class  icon-chevron-up pull-left  gt  lt  i gt   lt i class  icon-chevron-up pull-right  gt  lt  i gt  lt  a gt               lt  li gt           lt  ul gt       lt  li gt   lt  ul gt    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

User · Answer

I just fix this problem in my project-  CSS code   scroll-menu     min-width  220px     max-height  90vh     overflow  auto       HTML code   lt ul class  dropdown-menu scroll-menu  role  menu  gt      lt li gt  lt a href     gt Action lt  a gt  lt  li gt      lt li gt  lt a href     gt Another action lt  a gt  lt  li gt      lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt      lt li gt  lt a href     gt Action lt  a gt  lt  li gt            lt li gt  lt a href     gt Action lt  a gt  lt  li gt      lt li gt  lt a href     gt Another action lt  a gt  lt  li gt   lt  ul gt

User · Answer

Do everything in the inline of UL tag    lt ul class  dropdown-menu scrollable-menu  role  menu  style  height  auto max-height  200px  overflow-x  hidden   gt                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt                                      lt li gt  lt a href     gt Action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt               lt  ul gt

User · Answer

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

User · Answer

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      lt ul class  dropdown-menu pre-scrollable  gt                   lt li gt item 1  lt  li gt                   lt li gt item 2  lt  li gt     lt  ul gt

User · Answer

i hope this code is work well try this   add css file    scrollbar       height  auto      max-height  180px      overflow-x  hidden      HTML code    lt div class  col-sm-2  scrollable-menu  role  menu  gt       lt div gt      lt ul gt     lt li gt  lt a class  active  href   home  gt Tutorials lt  a gt  lt  li gt     lt li gt  lt a href   news  gt News lt  a gt  lt  li gt     lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt     lt li gt  lt a href   about  gt About lt  a gt  lt  li gt     lt li gt  lt a href   news  gt News lt  a gt  lt  li gt     lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt     lt li gt  lt a href   about  gt About lt  a gt  lt  li gt     lt li gt  lt a href   news  gt News lt  a gt  lt  li gt     lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt     lt li gt  lt a href   about  gt About lt  a gt  lt  li gt     lt li gt  lt a href   news  gt News lt  a gt  lt  li gt     lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt     lt li gt  lt a href   about  gt About lt  a gt  lt  li gt     lt li gt  lt a href   news  gt News lt  a gt  lt  li gt     lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt     lt li gt  lt a href   about  gt About lt  a gt  lt  li gt        lt  ul gt      lt  div gt      lt  div gt

User · 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          lt ul class  dropdown-menu scrollable-menu  role  menu  gt             lt li gt  lt a href     gt Action lt  a gt  lt  li gt             lt li gt  lt a href     gt Another action lt  a gt  lt  li gt             lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt             lt li gt  lt a href     gt Action lt  a gt  lt  li gt                            lt li gt  lt a href     gt Action lt  a gt  lt  li gt             lt li gt  lt a href     gt Another action lt  a gt  lt  li gt          lt  ul gt    Working example  https   www bootply com 86116   Bootstrap 4  Another example for Bootstrap 4 using flexbox

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

Examples related to css

Examples related to twitter-bootstrap

Examples related to scrollable