#sidenav-overlay stays active after sideNav('hide')

[gillchristian]

I'm using the SideNav for the collapsible menu in mobile:

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

The problem is, sometimes, when it hides after a touch on a menu item, the #sidenav-overlay does not go away unless I touch the html element.

I'm not good at jQuery but it looks like the closeOnClick does not hide the #sidenav-overlay.

[ThunderPaul]

Adding this code just after $ (this) .each () in the init method of sideNav.js the menu does not give me more trouble overlay.

if($('.drag-target').length){
          return;
        }

I hope I was helpful.

[ThunderPaul]

I use RequirreJS in Cordova app. So for me it worked without changing sidenav.js :

require(['backbone', 'router',  'materialize', 'waves'], function(Backbone, Router){

    var app = {
        inizialize: function(){
            document.addEventListener("deviceready", this.onDeviceReady,false);
        },
        onDeviceReady: function(){
            app.routerStart();
            app.materializeInit();
            app.baasBoxInit();
        },
        routerStart: function(){
            var routing = new Router();
            Backbone.history.start();
        },
        materializeInit: function(){
            Waves.displayEffect();
            $('.button-collapse').sideNav({'closeOnClick': true});
            $('.slider').slider({full_width: true});
            $('.parallax').parallax();
            $('.modal-trigger').leanModal();
            $('.scrollspy').scrollSpy();
            $('.datepicker').pickadate({selectYears: 20});
            $('select').not('.disabled').material_select();
        },
    }
    app.inizialize();
});

[cheshirrrcat]

@ThunderPaul Thanks man! I did the same actions and now I understand it was correct :+1: I think this solution needs pull-request ;)

[ThunderPaul]

@4eshircat Thank you so mouc!

[cope]

I just had the same problem as @gillchristian but with Meteor.

The problem is, I can't just edit sideNav.js :(

[burnaDLX]

Is there a solution for this problem?

[ktemo]

any updates on this issue?

[sethreidnz]

I'm having the same issue with Angular right now. Anyone got a work around that doesn't involve editing the js? or

#sidenav-overlay{
  background:none;
}

[ktemo]

@justsayno I did something a little nasty to fix it:

$('div[id^=sidenav-overlay]').remove();

[jshin-usc]

Still having the same issue, with Ember. Calling $('#sidenav-overlay').remove(); sort of works, but I get another weird bug where my content will no longer resize with the viewport.

So I just trigger a click on the overlay: Since I cannot add an action to {{#link-to}} I have in my nav component .hbs

{{#link-to "template" tagName="li">}}<span style="display: block" {{ action "closeOverlay" }}>Link</span>{{/link-to}}

And define the closeOverlay action in the nav component .js:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    closeOverlay() {
      Ember.$('#sidenav-overlay').trigger('click');
    }
  },

  setup: function () {
    Ember.$('.button-collapse').sideNav({
      closeOnClick: true
    });
  }.on("didRender")
});

[ajamjoom]

If you are using materialize with meteor then make sure to initialize $(".button-collapse").sideNav(); only in the MasterPage and not ChildPages. (aka initialize in the main most template)

[jonasbarsten]

@ajamjoom Have been struggling with that for a while :)

I still get that problem when initialising in Template.MainLayout.onRendered

How would you initialize the sideNav in this scenario:

routes.js:

FlowRouter.route('/', {
    name: 'home',
    action: function() {
        BlazeLayout.render("MainLayout", {content: "friends"});
    }
});

MainLayout.html:

<div id="main" class="main">
    {{> Toolbar}}

    {{>Template.dynamic template=content}}

    {{> Sidebar}}
</div>

Toolbar.html

<template name="Toolbar">
    <div id="toolbar">
        <div id="open-sidebar" data-activates="slide-out-left">
            <i class="ion-android-menu"></i>
        </div>
    </div>
</template>

Thanks :)

[weinde]

@ajamjoom I'm using materialize with meteor and I have tried this $('div[id^=sidenav-overlay]').remove(); It works fine, but now i get this weird bug that when I click on any element in the sidenav menu the overlay disapears but the sidenav still stays open and can't be closed... i have to refresh the page in order to close the sidenav... any suggestions?

But I dont understand what you mean by initializing $(".button-collapse").sideNav(); this only in masterpage...

[weinde]

It does not work... My sidemenu still stay opened and things are clickable inside it...

2016-11-09 16:57 GMT+01:00 Eduardo Brasil notifications@github.com:

Try!

sidenav-overlay{

z-index: 996; }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Dogfalo/materialize/issues/1676#issuecomment-259449266, or mute the thread https://github.com/notifications/unsubscribe-auth/AV9gI3esFGxCHbE_Wu442FpAspaCgbsuks5q8e11gaJpZM4FSR8E .

[basiljose1]

(function($){ $(function(){ $('.button-collapse').sideNav({ closeOnClick: true }); }); })(jQuery);

pass closeOnClick: true on SideNav initialization ..it will work

[radimhornicek]

I have a similar issue (maybe it worth to create a new issue). After touch (swipe left) event on phone (or in browser phone mode), the overlay wont disappear. But this issue is bound to swipe event only not click one. I believe this is matter of materialize jQuery script itself because this behavior is also in the original website navside demo.

I'm using Angular, so I tried to solve this by using ng-swipe-left (Angular Touch) but since there is deprecated ng-click directive extension - it broke my ng-click directives among code (even after enabling by $touchProvider). I solved this by using jQuery and directive, where I check for leftswipe and manually trigger click at #sidenav-overlay (dont use directly remove() that cause blink after reopen sidenav). Remember #sidenav-overlay is dynamically added after render, so don't forget to use $timeout in case you need it.

$(".drag-target").on("swipeleft", function () {
     $("#sidenav-overlay").trigger("click");
});

[fedegonzal]

Hi had that problem using Angular and I was making a mistake calling twice to $(".button-collapse").sideNav(); so may be you are doing something similar.. check if you not initialize more than one time sideNav in different snippets.

[eladolo]

The problem it´s that your are calling more than once the sideBar method. You can fix it like this:

$(".button-collapse").off("click").sideNav();

The .off("click") will clean the events added for that element an will append the sidebar method only.

[Jorgemarquez2222-zz]

if have this problem whit Angular 2. import { MaterializeModule } from 'angular2-materialize'; declare var jQuery:any;

jQuery('div[id^=sidenav-overlay]').remove();

[artemhp]

I have the same issue in Angular2. I have fixed it by @radimhornicek hook:

ngOnInit() {
    $('.button-collapse').sideNav({
      menuWidth: 300,
      edge: 'left',
      closeOnClick: true,
      draggable: true
    });
    $(".drag-target").on("swipeleft", function () {
      $("#sidenav-overlay").trigger("click");
    });
}

[richarng]

unless you actually want dragging/flinging of the sidenav, just set .drag-target to display:none in your css and you'll get it to behave. The JS does litter the DOM with multiple instances of drag-target, but those could be cleaned up easily with a js function.

[tomscholz]

https://github.com/Dogfalo/materialize/pull/1865

[Dogfalo]

Fixed in v1-dev

[mystictech]

@richarng that's the hack that did it for me, I also realized that it had something to do with drag-target class, one of the divs would often stay at width: %50 after you prompt the sideNav to "hide". Your way made it work so that it just wasn't in the way. For the record, I'm also using Materialize with Meteor.

[cnbcyln]

The solution to this problem is as follows. Very easy logic. Think of it as if you were clicking in the middle area.

$('#sidenav-overlay').trigger('click');