Topic: 4.4.3 side nav does not remove sidenav-overlay
Jonathan Yates pro asked 7 years ago
Hi,
I have updated to latest 4.4.3 as this is supposed to include improvements to the Side Nav. However, When I click on a link in my side nav it progressively adds a sidenav-overlay div to the main content. This causes the main content to have a mask overlay.
<div id="sidenav-overlay"></div>
I am also calling
$('.button-collapse').sideNav('hide'); For each navigation link as this is the only way to make the side bar disappear. If I then open the side nav and click another link I get another sidenav-overlay div added to the Dom.
<div id="sidenav-overlay"></div>
<div id="sidenav-overlay"></div>
Further side navigation adds sidenav-overlay divs for each navigation click and the page goes progressively darker as there are multiple overlays masking the main content.
I have spent hours trying to resolve this which is a real waste of my time!! This was working in previous versions.
How do I stop this happening and get rid of the sidenav-overlay divs when clicking a link?
Amware free answered 4 years ago
How could we go about fixing this in React because if I have a link in the SideNav and it don't navigate to anything the SideNav closes but the overlay stays. How do I go about fixing this?
UPDATE: I was able to fix this issue with invoking the handleToggleA
after my onClick
method finished that wasn't navigating to anything. Which by default clicking a navLink and the event listener picks up another event even unrelated to it the side nav will close it but keep the overlay visible. Now here is the following example:
// Where Method is being called
<MDBSideNavLink disabled topLevel>
Change OS View
<MDBSwitch
labelLeft={<MDBIcon brand icon='windows'/>}
labelRight={<MDBIcon brand icon='linux'/>}
checked={this.state.title === "Unix"}
className='pull-right' onClick={() => this.changeOS()} // Won't close overlay solution can be resolved in 2 ways you can put a && and call this.handleToggleA or call it at the end of this.changeOS
/>
</MDBSideNavLink>
Moderators can you please add this to a forum or Examples and Customization page for SideNav in the React view pane. That would be awesome.
Jonathan Yates pro answered 7 years ago
$(".button-collapse").sideNav({ closeOnClick: true });
Canart free commented 5 years ago
No. the only solution is to set display :none to overlay via CSS, but it's not the wish of my client.
Please help ! Exactly the same proble of Jonathan Yates.
Shoaib Abbas free commented 4 years ago
Solution for multiple creation of div with id="sidenav-overlay"such as: " " on click menu icon action add with $("div#sidenav-overlay").attr("class","sidenav-overlay");
and $(document).on('click',".sidenav-overlay",function (){ $(".sidenav-overlay").remove()});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Subhash Ekkaluru pro commented 6 years ago
hi, am also facing same issue , could you please solve this version: MDB PRO 4.5.3 Thank youCanart free commented 5 years ago
The problem persists. There is no solution ? I spent hours trying too.... Thanks for help