7

I have created a side menu using jasny bootstrap add-on. The markup is rather simple:

<div class="navmenu navmenu-inverse navmenu-fixed-right offcanvas-sm sidemenu">

    <ul class="nav navmenu-nav>
        <li></li>
        <!-- many more <li> which may have <ul> nested -->
    </ul>

</div>

The thing is that it is not scrollable on phones. When I try to scroll it it just doesn't work.

I was trying to check it deeply using the iOS Simulator with web inspector and try to bind some events. I tried binding the scroll event to the .sidemenu but this event never triggered. I've then tried bind the touchstart event and it worked as expected. I guess it means that it does recognise my touch but it just doesn't recognise the scroll gesture?

Any idea why it doesn't work?

kfirba
  • 5,231
  • 14
  • 41
  • 70
  • I ran some test and it's working on mobile and also scrolling. – Farzad Yousefzadeh Nov 22 '15 at 05:53
  • @FarzadYZ really? That's weird.. I ran many tests using different mobile phones and even a simulator and I couldn't get it to work. If I shared a demo link of my actual production code, would you mind trying it? – kfirba Nov 22 '15 at 06:00
  • Yeah, I could. provide a demo – Farzad Yousefzadeh Nov 22 '15 at 06:03
  • @FarzafYZ please visit http://receipto.org/#!/auth/login and use `demo@receipto.org` as the email and `password` as the password. I apology about the weird language. When you log in you will see what I'm talking about on your right. A note, please use an actual phone to see that issue. It works when the browser is resized or when using chrome's emulator but not on the real phones. Thanks! – kfirba Nov 22 '15 at 06:07
  • I saw the problem using mobile and it's on both Gecko and Webkit. A workaround would be to use `.navmenu-nav { overflow-y: auto }`. Check if that solves the problem,. – Farzad Yousefzadeh Nov 22 '15 at 08:00
  • @FarzadYZ I will be able to check that later on today. I will keep you updated. Thanks for checking that! – kfirba Nov 22 '15 at 08:25
  • @FarzadYZ Unfortunately it didn't solve the problem – kfirba Nov 22 '15 at 16:40
  • Try this: .sidemenu { min-height: 100%; height: auto; } – max Nov 26 '15 at 16:28
  • @makshh Hey. That doesn't work, unfortunately. – kfirba Nov 28 '15 at 16:02

2 Answers2

0

Try adding data-placement="right" to the toggle-button, doing this solved the issue for me.

<type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#menucanvas" data-placement="right">
Ralf
  • 1
0

I edited jasny-bootstrap.js, line 106 and changed this:

OffCanvas.DEFAULTS = {
toggle: true,
placement: 'auto',
autohide: true,
recalc: true,
disableScrolling: false, /*true*/ 
modal: false

}

It worked for me.

mene3
  • 1