Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

How to scroll a div inside another div?

In my Cordova 2.5.0 app for android, I have created a lightbox like popup, which is a <div>. Now i want to scroll the inner div, which I'm not able to. It has following structure

___________#lightbox_____________
|                               |
|     _______#header_________   |
|     |                     |   |
|     _______________________   |
|                               |
|     _____#wantToScroll_____   |
|     |                     |   |
|     |                     |   |
|     |                     |   |
|     |                     |   |
|     |  but doesn't        |   |
|     |                     |   |   
|     _______________________   |  

Css for #lightbox

width:100%;
height:100%;
overflow:hidden;
float:left;
position:absolute;
top:0;
left:0;
display:none;
background:rgba(0,0,0,.7);

css for #header

text-align:center;

css for #wantToScroll

  font-size:large;
    color:black;
    padding:1% 3%;
    line-height:1.5 em;
    max-height:70%;
    position:relative;
    overflow:auto;
    -webkit-overflow-scrolling: touch;

How to do this? Is there any issue that phonegap conflicts with native scrollview or something? As far as I have reached to the conclusion, it is not. The problem is with the positioning. But I tried all combinations of relative, fixed and absolute pos.

Kindly do not suggest to use any kind of external plugin like sencha or iscroll. I think there has to be a solution without these.

Upvotes: 0

Views: 5069

Answers (4)

Andrew Bullock
Andrew Bullock

Reputation: 37378

overflow: scroll 

doesnt work in Android 2.3.x,

you will need to build the scrolling yourself by listening for drag events.

see the iScroll library

Upvotes: 1

Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

Wow! overflow:scroll/auto is ignored in Android 2.3.x versions. I read this at MediaWiki

So I tried running the app on Android 4.2 and, tango! It "does" scroll therein. Now the only problem I am seeing that, when I scroll the specific <div>, the scrollbar appears onto the whole page, not to that particular element. Now I'll be looking after that issue, and post on stack if unsolved after fresh R&D. Thank you all. overflow:scroll was useful for the most part.

But the main question remains unanswered, why not 2.3.x? What is the motive behind ignoring the scroll for this version?

Upvotes: 0

nouveau
nouveau

Reputation: 1262

I don't know anything about android either, but it looks like good ol CSS to me.

overflow: scroll;

HERE is a jsfiddle of how we would do it in regular website style.

Upvotes: 1

user1288817
user1288817

Reputation:

I'm not familiar with android but it is not supposed to be:

css for #wantToScroll

overflow: scroll;

Upvotes: 1

Related Questions