0

I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this: 

Hammer("body").on("hold", function() {
    $(".row-offcanvas").toggleClass("active");
});

The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html

I tried to set overflow-x: hidden on the visible div, but that doesn't help. Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?

It is very frustrating. Please help :)

UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.

bboydflo
  • 907
  • 1
  • 15
  • 24
  • second link doesn't work, page not found. – Daniel Harper Dec 12 '13 at 10:47
  • http://florin-cosmin.dk/offcanvas/itworks.html try this one instead :) – bboydflo Dec 12 '13 at 10:49
  • 1
    so what you need to do is equalize the column height, have a look at this thread http://stackoverflow.com/questions/19393295/twitter-bootstrap-make-equal-height-columns-and-horizontally-centered-caption – Daniel Harper Dec 12 '13 at 11:02
  • I will try it. I thought about this solution before, but I focused on preventing scrolling. I will set the answer as the correct answer after I fix it. Thank you for the solution and for the link. – bboydflo Dec 12 '13 at 11:37

0 Answers0