Topic: Sidenav not appearing on button click when gallery is on same page

mark.mckenna priority asked 1 year ago


I'm working through a version of the ecommerce product detail page snippet...

https://mdbootstrap.com/snippets/standard/mdbootstrap/2515476?view=side

I ran into a problem in that the sidenav (Categories menu button) does not show. It works if I remove the vertical gallery in its entirety. I went back to the snippet - see link, and experience the same behaviour.

I don't see any console errors, but the menu just fails to show. If you remove the gallery from the html the menu immediately works correctly.

Any tips on solving this one?

Thanks!

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/snippets/standard/mdbootstrap/2515476?view=side


Michał Duszak staff answered 1 year ago


Hello, thank you for your feedback on this. Seems like lightbox is interfering this process. However, untill we fix it, I will give you a workaround: https://mdbootstrap.com/snippets/standard/m-duszak/3269724

In the JS we have to recreate the listener:

const sidenav = mdb.Sidenav.getInstance(document.querySelector('#sidenav-1'));
document.querySelector('#toggle-sidenav').addEventListener('click', ()=>{
  sidenav.show()
})

For this purpose we need to assign an ID id="toggle-sidenav" to our toggler (the Categories icon) in HTML

<a id="toggle-sidenav" class="nav-link" href="#" role="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"
             class="btn shadow-0 p-0 me-3" aria-controls="#sidenav-1" aria-haspopup="true">
            <i class="fas fa-bars me-1"></i>
            <span>Categories</span>
          </a>

mark.mckenna priority answered 1 year ago


That's brilliant. It's usually me breaking stuff so I spent quite a while confirming things first! :D

Thanks for the info, and the workaround - works great. Looking forward to the fix in due course.

Mark



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: All
  • Browser: Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes