CODEWITHSUNDEEP
androidhtmlcssjquery-mobile
mhartington
mhartington

Reputation: 7025

Jquery Mobile panel scrolls with content

Using Jquery Mobile, I have a panel div to create a navigation system and set the height of it to be 100% of the browser. If the content exceeds the height of the panel, the css overflow-y property lets the user scroll to see the hidden content. Pretty simple right?

Now here is where I'm getting in to some trouble, while the css overflow-y property works fine on iOS devices, Android is giving me some trouble. While the user is able to scroll the panel to see hidden content, the actual content div (div data-role="content) also scrolls. So if I have 10 items that I have to scroll to in the panel, the main content div will also scroll until I reach the end.
Heres a link to a demo
If you view this on a android device you'll see the issue I'm talking about. What I want to know if this is a problem from Android, Jquery, or something else. I'm using Android 4.1, JQM 1.3.2, and Jquery 1.9.1

CSS

.ui-panel { overflow-y:scroll; }

JS (for setting the height of the panel)

$(function(){
  $('.ui-panel').css({'height':($(document).height())+'px'});
  $(window).resize(function(){
    $('.ui-panel').css({'height':($(document).height())+'px'});
  });
});

Upvotes: 3

Views: 5949

Answers (1)

Omar
Omar

Reputation: 31732

Wrap your contents inside the panel with a div and give it a class i.e. inside. Then set overflow: hidden; for the panel #panel_id or .ui- panel. For the inner div, set overflow-y: scroll;.

Demo

.ui-panel {
  overflow: hidden;
}

.inside {
  overflow-y: scroll;
}

And now comes JS part. Adjust .inside height not the panel.

$('.inside').css({
    'height': ($(document).height()) + 'px'
});

$(window).resize(function () {
    $('.inside').css({
        'height': ($(document).height()) + 'px'
    });
});

Upvotes: 2

Related Questions