Skip to content
This repository

UpdatePagePadding() and ui-page-header{ padding-top:2.5em; } #4412

Closed
ToddThomson opened this Issue May 21, 2012 · 5 comments

4 participants

Todd Thomson Jasper de Groot Scott Jehl rycfung
Todd Thomson

For fixed headers, the call to UpdatePagePadding() causes page content to shift downward by 5px. This is due to the ui-page-header in structure being set to 2.5em ( or 16 x 2.5 = 40px ). Normally, jQM headers are 45px in height.
Setting ui-page-header-fixed to 45px ( or whatever your actual header height size is ) fixes this issue.

Jasper de Groot
Owner

@scottjehl - Should we still have those rules in the css now we have updatePagePadding?

.ui-page-header-fixed {
    padding-top: 2.5em;
}
.ui-page-footer-fixed {
    padding-bottom: 3em;
}

If you set updatePagePadding to false these padding rules still apply. Is that the way we want it?

Scott Jehl

Hmm. Well, as I'd said on the other issue, the option was about how often padding is updated, not whether it's set at all up-front.

That said, the em value here should match the height of the header, or as close as we can get it, before JS manages it. If it needs an update to match the current default height, go for it. I'd still suggest using em units though, if we can.

Jasper de Groot
Owner

@scottjehl

All clear (see also my comment on #4223). I will look into the default height - see if I can make it more consistent between browsers. Then I will update those padding rules. Issue with em units is the 1px border top and bottom, but will try to stick to those.

Jasper de Groot uGoMobi closed this in 79b1e01 June 18, 2012
Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile June 18, 2012
Jasper de Groot Fixes #4412 - Adjusted default top/bottom padding for page with fixed…
… toolbars.
12638ea
rycfung

After upgrading my app to 1.1.1, it seems like the flickering is still happening to my footer.
Whenever there is page change, there is a 1-2px whitespace at the bottom of my fixed footer.

I tried tweaking the padding-top padding-bottom with various value, there doesn't seem to be any changes at all to this flickering behaviour (ie. the 1-2px gap doesn't widen or shrink). In fact, it seems like the jquery mobile code is dynamically setting those padding anyway. I don't see how these css are doing anything in the case of fixed header/footers.

Is this fix suppose to remedy the problem of the flickering fixed footer on page changes? Or have I misinterpreted this issue?

Jasper de Groot
Owner

@rycfung

I think you misunderstood what this issue was about.
The code below is a simple representation of a page with fixed toolbars. Because ui-header and ui-footer have position fixed they are removed from the flow and ui-content goes underneath those elements. To prevent the top and bottom part of ui-content not being visible/accessible we set padding top and bottom on ui-page.
At first this is a default amount of padding and the updatePagePadding function sets the padding to the actual height of ui-header and ui-footer on certain events.

<div data-role="page" class="ui-page">
   <div data-role="header" data-position="fixed" class="ui-header"></div><!-- /header -->
   <div data-role="content" class="ui-content">

   </div><!-- /content -->
   <div data-role="footer" data-position="fixed" class="ui-footer"></div><!-- /footer -->
</div><!-- /page -->

Do you mind reporting your issue in a comment on issue #4259 which looks similar/related?
Please include information about on what platform/browser you tested and a test page. See https://github.com/jquery/jquery-mobile#issues.
Thanks!

Elliot Smith townxelliot referenced this issue from a commit July 30, 2012
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.