Search jQuery

jQuery Forum

patrik.lu..

Scroll inside panel

in jQuery Mobile • 4 months ago

I love the new panel feature. When the panel is used as a menu, it would be nice to have the content in the panel scrollable, and not effect the page position.

I would like a scrollabel div with height 100%, because of all the different screensizes out there.

I get the scrolling to work with a fixed height of the div, with position:absolute; overflow:scroll;

but that wont work with the height of 100%.

Maybe its some css on the panel set by jqm.

Can someone help me with this?

Thanks.

Replies(3)

simdrouin

Re: Scroll inside panel

3 months ago

Hi Patrick,

I had a similar problem, I needed to have a scrollable div with height 100%, and didn't want the page to scroll to the top when the previous position was at the bottom of the page dans I clicked to open the panel.

The best way I have found so far is to add the following CSS after your JQM CSS declaration:

.ui-panel.ui-panel-open {
    position:fixed;
}
 
.ui-panel .ui-panel-inner {
    height: 100%;
    overflow-y: auto;
}

That seems to work under iOS and Android phones I have tested so far.
Hope this helps!
Simon

paulthewa..

Re: Scroll inside panel

1 month ago

.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Response title

Attachments

jQuery Forum

Scroll inside panel

Replies(3)

Re: Scroll inside panel

Re: Scroll inside panel

Re: Scroll inside panel

Statistics

Tags

Actions

Related Posts