Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fixed header overlaps content #4562

Closed
noctufaber opened this Issue · 14 comments

4 participants

@noctufaber

When the page loads in Google Chrome or Apple Safari the fixed header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine.

To see the problem try going to http://www.mathbang.com.

Thanks!

@jaspermdegroot
Collaborator

@noctufaber

I am pretty sure we fixed this with the changes we made last week.

Can you test with latest code:

  <link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 

I am closing for now. If it there is still an issue when you use latest code, please comment and include a test page on our JSBin template (see https://github.com/jquery/jquery-mobile#issues). We will reopen.

@noctufaber

Tested with the latest code and the problem is still there. The h1 tag is being overlapped by the header. If you resize the window in chrome or safari you will see how it is supposed to look.

I modified my code to be very simple and concise. It's available in JSBin now here:
http://jsbin.com/awoluv/11/edit#preview

Thanks for the help.

@noctufaber

Someone on StackOverflow.com answered my question with this solution:
http://stackoverflow.com/questions/10966869/image-in-jquery-mobile-fixed-header-overlaps-content-until-resize-event

It seems to work, but I don't like the use of the "!important" directive. It feels like a sledge hammer for something needing a bit more surgical precision. Also, it will push the text down too far for standard text based headers, so it's not very portable. Basically it's a bit of a hack.

@agcolom
Collaborator

@uGoMobi @noctufaber I saw the issue 10 minutes ago, but now the problem seems gone for me on Safari! Are you still seeing the issue?

@noctufaber
@agcolom
Collaborator

@noctufaber @uGoMobi sorry, my bad, opening and closing the element inspector causes the problem to disappear!

@agcolom
Collaborator

Any window resize fixes the problem...

@noctufaber

Yeah. Is there a way to trigger the window resize event in JQuery (or JavaScript)? I've been looking but haven't found it yet.

@jaspermdegroot
Collaborator

@noctufaber

I can reproduce this on Safari, not on Chrome.

The framework sets padding-top - equal to the height of the header - on the div with data-role="page". This updatePagePadding function is bound to the "pageshow", resize and transition start events.

It seems like things don't happen in time. I see the padding has been added when I inspect the element, but it isn't applied when the page is rendered. The min-height for the page is incorrect too. We have to look into this.

In the structure CSS there is already a default padding based on the height of default padding [edit: padding --> header]. If you use the same header size for all your pages it can be useful (even when this bug is fixed) to adjust that with custom CSS.

.ui-page-header-fixed { padding-top: [your header size]; }

No need to use !important if your custom CSS comes after the framework CSS.

@noctufaber

Wonderful! Thanks for the help.

@noctufaber

Ummm... well this is embarrassing. Once I plugged in the image height and width attributes it worked perfectly. Unbelievably simple.

@jaspermdegroot
Collaborator

@noctufaber

Yeah, that explains it. I am glad it is solved!
Don't feel too embarrassed ;-)

@deviator206

I am using
JQM - 1.2.0
Jquery - 1.8

My Page contains

  • header
    • Search Text Area { we have placed textarea here coz it is suppose to be on top of the page always}
  • content
    • UL -- multiple LI elements

Issue - If we scroll the list and then tap on textarea the header stays at its place and UL-->LI which are scrolled above the header are visible and it looks as if the header is hanging in middle of the screen.

Platform - only iOS-Safari

header-containing text-area-falls down

@jaspermdegroot
Collaborator

@deviator206 - There is an open ticket for this: #5532

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.