If have an iframe in my PhoneGap app. The frame has been given a height of 1000. By adjusting its width to 50% I can scroll by touching the parent on the space next to the frame. But when I try to scroll by touching the frame itself, there is no response.
I looked for this problem and some issues have been reported that came with a solution including the -webkit-overflow-scrolling: touch; but no luck.
#content_wrap { display: inline-block; float:left; width:100%; overflow-x:hidden; position:relative; height:auto; z-index:300; } #content_wrap .content_container { position:absolute; left:0px; display:inline-block; float:left; width:100%; padding:0; min-height:100%; height:auto; background-color:#FFF; } #tickets { display:inline-block; float:left; width:50%; margin:0px; height:auto; } #ticketFrame { height:1000px; display:inline-block; float:left; width:100%; } The html:
<div id="content_wrap"> <div class="content_container"> <div id="tickets"> <iframe src="someurl" frameborder="0" id="ticketFrame"></iframe> </div> </div> </div> I am a fan of using display inline block and float left as u can see ;)
What to do to be able to scroll with touchscreen in phonegap?
1 Answers
Answers 1
maybe problem is your iframe tag? </iframe">
if its not, add/change your css and try again.
html, body { height: 100%; min-height: 100%; margin: 0; padding: 0; } #content_wrap { display: inline-block; float:left; width:100%; overflow-x:hidden; position:relative; height:100%; z-index:300; } #content_wrap .content_container { position:absolute; left:0px; display:inline-block; float:left; width:100%; padding:0; min-height:100%; height:auto; background-color:#FFF; } #tickets { display:inline-block; float:left; width:50%; margin:0px; height:100%; right: 0; bottom: 0; left: 0; top: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; } #ticketFrame { height:1000px; display:inline-block; float:left; width:100%; } 
0 comments:
Post a Comment