4.4.3 side nav does not remove sidenav-overlay

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.

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.

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?

Subhash Ekkaluru pro commented 7 years ago

hi, am also facing same issue , could you please solve this version: MDB PRO 4.5.3 Thank you

Canart commented 5 years ago

The problem persists. There is no solution ? I spent hours trying too.... Thanks for help

Add comment

Jonathan Yates pro answered 7 years ago

0 0 Best answer

Resolved this eventually with

$(".button-collapse").sideNav({
  closeOnClick: true
});

Canart 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 commented 5 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()});

Add comment

Alec Mingione answered 4 years ago

0 0 Best answer

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'https://mdbcdn.b-cdn.net/>}
        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.

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Jonathan Yates

Pro User

12Support score
9Questions 22Answers

0Snippets likes 0Snippets