Fixed header overlaps content

[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]

@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]

@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]

Just checked it on Chrome. The problem is still there.

On Tue, Jun 19, 2012 at 4:13 PM, Anne-Gaelle Colom <
reply@reply.github.com

wrote:

@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?

---

Reply to this email directly or view it on GitHub:
#4562 (comment)

[agcolom]

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

[agcolom]

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]

@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]

@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

[jaspermdegroot]

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