'toggled' menu items go off the bottom of the page.

[bobg2015]

Hi,

If you have a large amount of items in a list the list will go off the bottom of the browser page and not be visible/accessible. This appears to be because the menu elements just overlay ( not sure if thats the correct term) over the existing page and the scrolling is therefore restricted to the existing pages height.

Is there a way to build an internal scrolling mechanism into the nav menus when collapsed?

[pramod-rathod-avalara]

Hi,

Please check if the below resolves your issue.

.scrollable {
  overflow-y: scroll;
  height: 100vh;
  margin-bottom: -101px;
}

<div id="sidebar-wrapper">
                <div class="navbar-default sidebar scrollable" role="navigation">
                  ....
               </div>
</div>

[bobg2015]

Thank you. That kind of works but I needed to add the scrollable class to the unordered list not in the sidebar. i.e

<ul class="nav nav-fourth-level scrollable collapse">

Is there a way to have the height and margin resize to fit the amount of list items better?

[pramod-rathod-avalara]

Hi,

Not sure if the below is what you need, but you can work with the below CSS. For the sub-menu I have kept the size 400px max, so it can accommodate 10 menu items. If you are looking for something that auto fits within the view-port then you may need to do it using JavaScript by setting the bottom:0, check these links may be helpful http://jsfiddle.net/G7qfq/5/ and twbs/bootstrap#12328

.scrollable-menu {
  overflow-y: scroll;
  height: 100vh;
  margin-bottom: -101px;
}

.scrollable-sub-menu {
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}

[bobg2015]

Hi thank you for that. I will have a look into the links you provided.

I'm sorry if this is a silly question but where within the sidebar should I be applying these styles you've provided? I assume its still within the unorderedlists?

[bobg2015]

ok I'm close to working out how to get it to display properly.

      $("ul.nav li#mytestl").click(function(){
         $(this).find("ul").css({
           backgroundColor: "green",
           height: "50vh",
           'overflow-y': 'scroll'
       });
    });

What I am trying to do is set the height in javascript. I'll add a check which basically says "if the height is greater than 50vh then set it to 50vh." That way those with 2 items will still have the correct height.

The problem I am facing is whilst I can set the overflow and backgroundColor(for test purposes) using .css the height I'm setting is getting overwritten. I assume it is the metismenu code but not sure.

[pramod-rathod-avalara]

Class scrollable-sub-menu you can put it at any sub level menu you like to e.g. in the below snippet i have put it at second-level menu. Class 'scrollable-menu', is applicable for the sidebar

<ul class="nav nav-second-level collapse in scrollable-sub-menu" aria-expanded="true">

<div class="navbar-default sidebar scrollable-menu" role="navigation">

[pramod-rathod-avalara]

I'll add a check which basically says "if the height is greater than 50vh then set it to 50vh." That way those with 2 items will still have the correct height.

I think you can achieve this using CSS as well with the property max-height: 50vh.

In case some library is overriding some CSS properties that you set, although not a good practice but you can make use of !important

[bobg2015]

Thank you! max-height did the trick, such a simple solution I had totally over complicated it.

Essentially all I have now is

.scrollable {
  overflow-y: scroll;
  max-height: 50vh; 
}

which I add to my lowest level NAV i.e

 <ul  class="nav nav-fifth-level scrollable collapse">

thanks again for all of your hard work and assistance!