sidenav scrollbar not working


Topic: sidenav scrollbar not working

Kurt asked 5 years ago

There is no Scrollbar on Sidenav on smartphone screens.In SourceCode i see only ps and not ps--active-y in ul-class: custom-scrollbar navbar-light blue-grey lighten-5 side-nav-light ps

The same symptom shows this MDB Example: https://mdbootstrap.com/snippets/jquery/mdbootstrap/98613

A running example is this:https://mdbootstrap.com/snippets/jquery/mdbootstrap/670810

My init code is like this:$('.button-collapse').sideNav({ edge: 'right', // Choose the horizontal origin menuWidth: 240, // Width for sidenav showOverlay: false, // Display overlay showCloseButton: false // Append close button into sidenav }); var sideNavScrollbar = document.querySelector('.custom-scrollbar'); var ps = new PerfectScrollbar(sideNavScrollbar);


Mateusz Łubianka staff answered 5 years ago

Hi @Kurt,

I chcked sidenav in MDB main page and there scrollbar works fine. I also checked snippet and scrollbar works. Is there a problem I can't see?

enter image description here

Best,


Kurt commented 5 years ago

Would you like have a look at betten-krueger.de please Best,


Kurt answered 5 years ago

ok, i could solve it with an idea from Hafid 75 (https://mdbootstrap.com/snippets/jquery/hafid75/1388009#)

i changed HTML to <ul class="custom-scrollbar" style="height:100%;overflow-y:auto;"> in addition i added to CSS: #sidenav-overlay {z-index:1030;}

so i can click everywhere on the screen to close sidenav

.Best


Mateusz Łubianka staff commented 5 years ago

So does it work fine now?

Best,


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.14.0
  • Device: Smartphone
  • Browser: Safari
  • OS: OS 13.3.1
  • Provided sample code: No
  • Provided link: Yes