Height not being calculated properly? #4219

Belelros opened this Issue Apr 26, 2012 · 14 comments

5 participants


I'm having some really weird issues with some pages, when transitioning them into view.

I've experiencied it with a list view which is being inserted in a pageinit handler function but asynchronously. Once the list view is populated it's enhanced with listview('refresh')

However, the last item gets cut by the fixed footer. I've noticed that if you change the window size the problem gets solved. As a workaround I solved it calling this method:


Although the toolbar is never hidden. It seems to reposition it correctly. However the page transitions get bad specially on mobile devices and I think this shouldn't be happening.

You can test it here:


Using jQM 1.1
To reproduce the issue go to the second link in the navbar. Then press the first element in the list view. If you scroll down you'll see the problem.

I also noticed that sometimes the map get mid-blank and a page resize solves the problem too.


Does this issue also happen if you set the toolbar non persistent?


Do you mean changing ids so they won't be reused by jQM ?


Yes, if the footers on different pages have the same id, they get persistent.
On this pages the needed page-padding for footer (and header) toolbars is computed when page transition happens.
I think there is an issue in 1.1 like at #4176


@MauriceG I can confirm that disabling the persistent mode "solves" the issue. However, this shouldn't be happening...


I was wondering the same, too (#4006).

I thought the padding should go on the content not on the page, because the page contains the footer so adding padding to the page does not really ensure the content is visible - it only stretches the page, doesn't it?

I solved it for my specific case (I need to recalculate width/height anyway, so I just added padding/margin to the content section), but maybe this is a bug in 1.1.

@scottjehl - reopen #4006?


Did you try:

updatePagePadding update the padding (either top or bottom, depending on if the toolbar is a header or a footer) of the page element parent of the toolbar to match the height of the toolbar.


There is also an updatelayout event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this updatelayout event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the updatelayout event to update the widget in response.



The updatePagePadding() function is bound to animation start and to pageshow.

Is there really a need to call it manually?


Hi @toddparker

I already tried the updatePagePadding method before posting the issue here. The issue still happens. As @MauriceG states however, I see no need in calling this method since it's bound to pageshow, and also the listview is beeing refreshed properly, which also should trigger the event.

I also triggered the event updatelayout and again, no effect:


Hi @Belelros, hi @toddparker
It seems, there is a bug in jquery.mobile.fixedToolbar.js.
Altough the updatePagePadding() function is called three times on every page-navigation (one time on the "fromPage", two times on the "toPage"), the target-page does not get the right padding.
If you leave a "wrong padded page" and come back, the padding is right.
It was set by the out-transition animation-start.
It seems, updatePagePadding() is called with a wrong context.


@MauriceG - Do you want to try to track this down and submit a PR?


Thanks. I'll take a look...

jQuery Foundation member


Can you test your project using this code:

JS: http://ugomobi.github.com/fixedtoolbars/js_new06132012.js
CSS: http://ugomobi.github.com/fixedtoolbars/css_new06132012.css

This includes the changes of PR #4260 from @MauriceG

Please confirm if this solves the issue you were having the fixed footer. Thanks!


@uGoMobi it's working perfectly. The footer is positioned correctly between page transitions. Good job!

jQuery Foundation member

Fixed by commit 0992512.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment