Offcanvas Push Menu not scrolling when items expand

[ReaVerHC]

Hey mate, thanks for an awesome plugin.

I am trying to implement the push menu in a project but noticed that when you expand the offcanvas menu items that you cannot scroll vertically if the menu gets longer than your view port. It's as if the menu is "locked" from scrolling vertically. I tried it on your example page and it does the same as in my project: https://jasny.github.io/bootstrap/examples/navmenu-push/ . I tested it on the iPhone 4s.

I tried to see if someone else had this issue but can't find anything so I'm not sure if you are aware of this.

Thanks again

[siwwar]

I have got the same problem when I used the Chrome Developer Tools Device Mode (Emulator):

[shpuntj]

Experiencing the same issue as well, reverted back to v3.1.2 until issue has been resolved.

[ReaVerHC]

@shpuntj Does v3.1.2 not have this issue?

[shpuntj]

@ReaVerHC version 3.1.2 does not have the issue.

[ChavaSobreyra]

the problem is that overflow-y is set to auto for navmenu-fixed-left, but not for navmenu-fixed-right.

[ReaVerHC]

@cqcsobreyra Thanks for the reply, is there a chance you can drop it in a fiddle or something please? I'm a bit intermediate with regards to editing the jquery/javascript.

[s6admin]

We have the same issue as well (demo page and custom implementation). Tested on Android 5.1, Safari iOS 7 iPhone.

Even explicitly forcing overflow-y:scroll !important; doesn't help. This one is difficult to debug because it works on every test case we've tried on desktop.

[suslovjb]

great plugin.. have the same issue in https://jasny.github.io/bootstrap/examples/navmenu-push/ .. cant scroll from chrome and firefox (android) in landscape..

[wkentdag]

@ReaVerHC if you just specify v3.1.2 exactly (in your bower.json, for example) that should do the trick. Unfortunately, reverting to 3.1.2 does not solve the problem on mobile for me (tested on iphone 6).

For 3.1.3, I was able to scroll the menu by wrapping the contents of the navmenu in a container, e.g. :

<nav id="#sidebar" class="navmenu navmenu-fixed-left offcanvas" role="navigation">
  <div class="sidebar-container" style="height:100%;overflow-y:scroll;">
    <h1> Push menu will scroll with content overflow on y-axis</h1>
        ...
  </div>
</nav>

I tested the above solution on desktop (chrome, ff, safari) and it works, but unfortunately it's still broken for mobile, so i'm working around it by collapsing my sidebar content under header categories until it's fixed.

[nolaandy]

I have since reverted back to v3.1.2 and it does indeed fix the problem of the mobile sidebar not scrolling.

Unfortunately it created another problem for me.

Now every time I close the off-canvas sidebar and go back to the page, I can't scroll up or down on the page anymore.

If I go to a new page, I can scroll everywhere, but as soon as I open the off-canvas nav then close it my screen allows no scrolling from whatever part of the website I was last on.

Anyone heard of this issue?

[carefulmistake]

Dropping to 3.1.2 fixed this for me as well. http://cdnjs.com/libraries/jasny-bootstrap/3.1.2

Thanks for the help.

[pikos-apikos]

Dropping to 3.1.2 fixed this for me too

[observerslee]

Dropping back to 3.1.2 fixes the long menu scroll issue.
However, it is not a perfect solution.

On 3.1.2, if you keep dragging the offcanvas menu when it reaches the top or the bottom of the viewport, you will end up scrolling the "body" which is supposed to be overflow hidden.

3.1.2 functions on touch devices while 3.1.3 does not. Both works great on desktop browsers.

[LunkRat]

I've been implementing the offcanvas navmenu for a client project this week, and I am in agreement with @julesman that this brilliant and wonderful project is rendered useless by these bugs. I also noticed that the issues appear in the v3.1.3 demo.

I did get the menu scroll working (I'm using navmenu-fixed-right) and I was able to fix the touch problem described in #230. Here's what I did:

1. Downgraded to version 3.1.2 JS and CSS files from https://github.com/jasny/bootstrap/releases/download/v3.1.2/jasny-bootstrap-3.1.2-dist.zip
2. Added the following CSS to get my right-side navmenu to scroll when it has open dropdowns:

.navmenu-fixed-left,
.navmenu-fixed-right,
.navbar-offcanvas {
  overflow-y: auto;
}

1. Added the following CSS to fix drop down sub menu doesn't work in mobile #230:

.offcanvas .navmenu-nav.dropdown-menu {
  position:relative;
}

Two bugs remain:

• The body scrolls when you scroll past the bottom of the navmenu.
• The menu hides if you close a dropdown menu

[vangorra]

Even with the suggestions in this issue, scrolling the menu on Chrome (Android) still doesn't work. I'm using 3.1.3.
Using the chrome remote inspector, I can see a scrollbar is added but scroll doesn't work. I went as far as to disable all the styles on the navmenu and add my own overflow-y, it still doesn't help. As this point, I don't think CSS is the issue. What other observations has other people seen?

[bustaramz]

This worked for me, tested on iPhone 6:

In the 3.1.3 javascript file change:

//disable scrolling on mobiles (they ignore overflow:hidden) $('body').on('touchmove.bs', function(e) { e.preventDefault(); });

to

//disable scrolling on mobiles (they ignore overflow:hidden) $('#myNavmenu').css('height', $(window).height()) $('body').on('touchmove.bs', function (e) { if (!$(e.target).is('#myNavmenu, #myNavmenu ul, #myNavmenu li, #myNavmenu li a')) { e.preventDefault(); } });

Maybe there are some CSS changes needed too,
but this was the main reason why it wasn't working.

Good luck!

[Bennethon]

I don't understand why this issue is closed. It is still a problem. I have 3.1.3, and I still have to implement the hack workarounds in this thread to make it scroll properly.

Sorry. It looks like this is now being tracked under a different issue number: #421