CODEWITHSUNDEEP
javascripthtmlcssjquery-mobile
Scott
Scott

Reputation: 3977

jQuery Mobile - Page content hidden under persistent header

Code and demo can be found here: http://chapp.stage.philosophydesign.com/

When the home page is loaded everything is fine. But when I switch another page using the footer navigation the new page content goes under the header. It appears that the header height is not being correctly calculated.

Why is this happening and how can I stop it from happening?

Upvotes: 1

Views: 2144

Answers (1)

kaiser
kaiser

Reputation: 22363

That's a known issue. So far I've developed one work around and another one found in the Github Bug Tracker.

Here's the summed up results from our chat over at "Stoppress" (WPSE)

// From Bug tracker #4219 @TodParker
$( "[data-position='fixed']" ).fixedtoolbar( 'updatePagePadding' );
// My own solution
$( "[data-position='fixed']" ).trigger( 'updatelayout' );

// Summed up: (Note) `pageload` and `.bind()` and equals won't work here.
$( document ).on( "pageshow", function(){
    $( "[data-position='fixed']" ).trigger( 'updatelayout' );
} );

If you also have encountered this issue/seen this behavior, please step in and help fixing it or support the Pull request that tries to fix it!

Upvotes: 4

Related Questions