Show vertical scrollbar when side bar has many items

[kyriakos77]

In sb-admin-v2, when the sidebar has more items that can fit in the page's height, no vertical scrollbar is displayed. Instead the excess items are being lost.

Any way around this?

[BlackrockDigital]

overflow:auto should do the trick. I will have to play around with it to make it work. We're working on a big update to Start Bootstrap at the moment and then we'll be revisiting all of our themes and patching up any small bugs/problems like this one.

[BlackrockDigital]

I'm going to keep this open for the time being as a "to-do" item.

[kyriakos77]

Thank you, please do keep up the good work. In the meanwhile, I was able to work around this issue as follows:

.navbar-static-side { height: 90%; /_Setting to 100% doesn't work, because of the margin-top:51px setting. The correct value should be 100%-51px, but I don't know how to set this with css :-( / overflow-y: auto; /Show the scrollbar/ position: fixed; /This did the trick! The original value was "absolute" / margin-top:51px; / Original Value / width:250px; / Original Value / z-index: 1; /_ Original Value / }

Please note that I am not a css expert, so the solution is a result of a "trial-and-error" approach.

[erpheus]

As an addition to the previous answer, height = 100% - 51px is specified like this (beware of browser support): height: 90%; height: calc(100% - 51px);

Also, for those using this scroll fix, the css should be placed inside the media query for navbar-static-side to not affect mobile behavior.

[BlackrockDigital]

In order to avoid further issues with the fixed side bar we're going back to static in the next release of SB Admin 2.

[tmthyjames]

Just tested this and putting it here for anyone still interested.

.sidebar{
    overflow-y: scroll;
    position: fixed;
}

Then:

var topNavBar = 50;
var footer = 48;
var height = $(window).height();
$('.sidebar').css('height', (height - (topNavBar+footer)));

$(window).resize(function(){
    var height = $(window).height();
    $('.sidebar').css('height', (height - (topNavBar+footer)));
});

If you don't have a top navbar or footer, then just remove those.

[cacpmw]

@kyriakos77 what file did you add that in? I have the same problem but with sbadmin 1. I need to add a scrollbar to the menu but I cant find that class anywhere

[nicolaspluhator]

@cacpmw

Add the following to your css/scss:

.navbar-sidenav { overflow:hidden; }

This will add a hidden scrollbar to the sidenav. Adding a visible scrollbar throws off the tooltips when the sidenav is collapsed. I could not solve that part but would prefer the scrollbar to be visible if someone else has a solution.

[eric218110]

Caso esteja usando o bootstrap basta adicionar a classe pre-scrollable no sidebar

[shravanm05]

You can add vertical scroll bar by adding this

    $(".button-collapse").sideNav();
    var el = document.querySelector('.custom-scrollbar');
    Ps.initialize(el);