Sidenav not appearing on button click when gallery is on sam

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

mark.mckenna priority asked 3 years 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

Add comment

Michał Duszak staff answered 3 years ago

1 0 Best answer

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:
<a href="https://mdbootstrap.com/snippets/standard/m-duszak/3269724" target="_blank">https://mdbootstrap.com/snippets/standard/m-duszak/3269724</a>

In the JS we have to recreate the listener:

<pre class="prettyprint"><code>const sidenav = mdb.Sidenav.getInstance(document.querySelector('#sidenav-1'));
document.querySelector('#toggle-sidenav').addEventListener('click', ()=>{
 sidenav.show()
})
</code></pre>

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

<pre class="prettyprint"><code><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">
 
 Categories
 </a>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

mark.mckenna priority answered 3 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

mark.mckenna

25Support score
2Questions 1Answers 0Snippets