Topic: Right Sidenav not working with scroll

davesmacer priority asked 10 months ago


Right sidenav is not showing whenever there's a scrollbar on my site. So on big pages, it will never show up. I prepared a code snippet to see the issue:

https://mdbootstrap.com/snippets/standard/davesmacer/5514388

use the buttons add and del space to add/remove scrollbar, that's what's making it.

Please, I need you to fix this ASAP, it's really affecting me right now, today I had a demo and some menus wouldn't show up...


davesmacer priority commented 10 months ago

could you prepare a code example of the fix based on the one I added here? I already did what you said and didn't work, the right sidenav never pops up when I have a scrollbar on my page. If I have it open, I can add the space and it stays there, but if I don't have it open, it will never show up


davesmacer priority commented 10 months ago

???????????????


davesmacer priority answered 8 months ago


For those struggling with this. I made a workaround using JS:

function toggleScrollbar() {
    var style = document.getElementById('hideScrollbarCss');
    if (style) {
        // Show scrollbar
        style.remove();
    }
    else {
        // Hide scrollbar
        var style = document.createElement('style');
        style.id = 'hideScrollbarCss';
        style.innerHTML = `::-webkit-scrollbar {display: none;}`;
        document.head.appendChild(style);
    }
}

function openOptions() {
    toggleScrollbar();
    var sideNavJq = $("#sidenav-right");
    const sidenav = mdb.Sidenav.getInstance(sideNavJq[0]);
    sidenav.toggle();
    toggleScrollbar();
}

Then you need to call openOptions() to toggle the right sidenav.


Grzegorz Bujański staff answered 9 months ago


Unfortunately, I am unable to provide a workaround. We need to make a fix in the component code. Without it, the Sidenav right won't work properly.

We'll fix it in the next version, but unfortunately, as I mentioned before, I can't say exactly when the new version will be released. We will try to release a new version as soon as possible. But I can't promise it will be in 1-2 weeks.

We are currently introducing a lot of changes aimed at, for example, improving the performance of the package, reducing its size and implementing better theming. In the meantime, we are also fixing bugs to improve the stability of the package. Unfortunately, it takes a lot of time and requires a lot of testing from us.

We're sorry we're unable to provide a fix right now. But we must ask for patience. We will do our best to release a new version as soon as possible.


davesmacer priority commented 9 months ago

I understand, at least you are working on it. Thank you for explaining, anyway!


davesmacer priority answered 9 months ago


Will this get fixed at all? It's really affecting me right now. I need a workaround or something! I have used:

::-webkit-scrollbar { display: none; }

to hide the scroll bar and everything works fine that way, but the user already complained about losing on large pages and not having scroll in their mouses...


davesmacer priority answered 10 months ago


Any progress on this? It is a huge error and I don't see any update


Grzegorz Bujański staff commented 10 months ago

Unfortunately no, I am still unable to say when the new version will come out


Grzegorz Bujański staff answered 10 months ago


We are in the process of fixing this bug, unfortunately we are not ready to release it yet.


davesmacer priority commented 10 months ago

Thank you. Sorry to bother, but this does have a huge impact on my webapp. I'll wait patiently, please update me as soon as you can.


davesmacer priority commented 10 months ago

Any progress on this?



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes