CODEWITHSUNDEEP
jquery-mobile
Daniel
Daniel

Reputation: 1402

jquery-mobile: How to make page with two independent scrollable areas

I'm using jquery-mobile and want to separate page into two areas: list and details. So I do it with two-column grid. But sometimes list or/and detail area getting too long for screen and I'd like to have independent scrolling of both areas, preferably with jquery-tools, so that scrolling of one area doesn't affect the other one.

Does anyone have ideas?

Upvotes: 3

Views: 731

Answers (1)

Omar
Omar

Reputation: 31732

Solution 1

Create content divs data-role="content" and much as you want directly under data-role="page. Set a max-height value and overflow-y: scroll;.

.ui-content {
  max-height: 150px !important;
  overflow-y: scroll;
}

Demo

Solution 2

Inside main content div data-role="content", add content divs and override their max-height and overlfow-y only not the parent content div.

.ui-content .ui-content {
  max-height: 150px !important;
  overflow-y: scroll;
}

Demo

Upvotes: 1

Related Questions