Reputation: 1386
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
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
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
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
Reputation:
I'm not familiar with android but it is not supposed to be:
css for #wantToScroll
overflow: scroll;
Upvotes: 1