Image in jquery mobile fixed header overlaps content until resize event

Question

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

Thanks!

Answer 1

I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.

You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:

$(window).on('load', function () {
    $(this).trigger('resize');
});

I pasted this code into the console while on your page and it re-positioned the title element as expected.

Answer 2

Does applying the following CSS help?

.ui-page {
    padding-top: 91px !important;
}

Note that you will have to refine the selector as this will apply to overlay popups either.

Answer 3

I had lots of trouble with this. This worked until I wanted to add a link:

<div data-role="header">
  <img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>

Note the empty h1 tag.

I ended up not using a data-role="header" at all, I just couldn't get it to work with a link. I used a ui-bar class instead. Like this:

<div class="ui-bar ui-bar-a">
    <a href="/" data-role="none">
        <img border="0" src="images/logo.png" style="float: left; display:inline">
    </a>
</div>