Page content's padding is not adjusted when fixed header elements changes its height due to a media query

[m90]

When using a fixed and persistent header that has several fixed height values for different screen states (i.e. media query) the pages' inline padding-top value (that will push the content down to fit underneath the header element) will not update accordingly.

See this demo fiddle and change the width of the viewport: the page's padding will be stuck with the value that it gets on initialization (min-height will update on $(window).resize() though).

[jaspermdegroot]

I think this is indeed a regression.
On resize updatePagePadding() should be called: https://github.com/jquery/jquery-mobile/blob/master/js/widgets/fixedToolbar.js#L119
I tested this local by replacing the call to updatePagePadding in that line by an alert and only got the alert after loading the page.
I tested throttledresize with a script in the head and then it did fire after resizing the window.
Not sure what's causing this problem.

[scottjehl]

Hey guys
The commit above works around this issue. For some reason, the throttledresize binding was passing its event object to the updatePagePadding function, though I think it was unintentional. As a result, the argument was defined and we were setting padding on that instead of the page element.

I worked around it by checking if the arg is an event or not before considering it a page. I'm unsure though if it'd be better to find a way to pass the page as an argument instead and avoid this check.

Either way, it's fixed now and we could land this and optimize later if desirable.

Let me know if it looks good to merge!

[scottjehl]

Here's a JSbin with the fix running
http://jsbin.com/ozurob/1

• @toddparker

[scottjehl]

fixed.