Skip to content
This repository

Height not being calculated properly? #4219

Closed
Belelros opened this Issue April 26, 2012 · 14 comments

5 participants

Antonio Laguna Jasper de Groot Maurice Gottlieb Sven Franck Todd Parker
Antonio Laguna

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:

$("[data-position='fixed']").fixedtoolbar('show'); 

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:

http://www.funcion13.com/proyectos/preprobus/

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.

Maurice Gottlieb

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

Antonio Laguna

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

Maurice Gottlieb

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

Antonio Laguna

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

Sven Franck

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?

Todd Parker

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.

$("[data-position='fixed']").fixedtoolbar('updatePagePadding');

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.

http://jquerymobile.com/test/docs/toolbars/bars-fixed-methods.html

Maurice Gottlieb

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

Is there really a need to call it manually?

Antonio Laguna

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:

list.listview('refresh').trigger('updatelayout');
Maurice Gottlieb

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.

Todd Parker

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

Maurice Gottlieb

@toddparker
Thanks. I'll take a look...

Jasper de Groot
Owner

@Belelros

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!

Antonio Laguna

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

Jasper de Groot
Owner

Fixed by commit 0992512.

Jasper de Groot uGoMobi closed this June 15, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.