CODEWITHSUNDEEP
androidcsshtmlcordovacss-position
nikolas
nikolas

Reputation: 722

Android Phonegap/Webkit/Viewport position fixed

i m having an issue with position fixed on an app that i m making with phonegap.. till now i thought it was operating as it should, but i found out that position fixed "breaks" under specific circumstances.. i have on top a row (div) with a couple of tabs and onclick of each tab with some javascript and css i change the main view using display property..

i found out though, that if i have scrolled down on a view, and then i select change tab, then the entire row of tabs instead of staying "fixed" on top, it moves down, and gets "fixed" on a new lower than the top position..

the main layout of my code is

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<head>
</head>
<body>
<div id="tabwrap">a couple of divs for tabs blah blah</div>
<div id="content">main view with hide/show etc</div>
</body>

(i included the meta viewport tag just to point that i m using it as well) if the main view isn't scrolled down, and it is on top, then there is no break the position fixed, and stays on top as expected.. i tried to "trick" it by adding on the onclick event of each tab this line

document.body.scrollTop = document.documentElement.scrollTop = 0;

so that it would return to top before loading next content in the corresponding div, but no success..

and the css

#tabwrap {height:3em; position:fixed; width:100%; }
#content { padding-top:4em; width:100%; }

here is a small demo from jsfiddle but dont know if it is of any use.. http://jsfiddle.net/B3Y5N/7/ i ve stripped some fo the code to make it simplier

the weird thing is, that on 2.3.5 (samsung s5570) it has no problem, and i notice the issue on 4.2.2 (nexus) while i would expect the opposite..

Upvotes: 1

Views: 1510

Answers (1)

nikolas
nikolas

Reputation: 722

here the changes that i ve made that seem to have fixed the issue..

 #tabwrap {height:3em; position:fixed; width:100%; top:0; left:0; z-index:100;}

 #content {position absolute; top:4em; width:100%; height:100%}

also removed from html document the 

height:device-height

from 

meta name=viewport tag

Upvotes: 2

Related Questions