New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Height not being calculated properly? #4219

Closed
Antonio-Laguna opened this Issue Apr 26, 2012 · 14 comments

Comments

Projects
None yet
5 participants
@Antonio-Laguna

Antonio-Laguna commented Apr 26, 2012

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.

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 26, 2012

Contributor

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

Contributor

MauriceG commented Apr 26, 2012

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

@Antonio-Laguna

This comment has been minimized.

Show comment
Hide comment
@Antonio-Laguna

Antonio-Laguna Apr 26, 2012

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

Antonio-Laguna commented Apr 26, 2012

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

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 26, 2012

Contributor

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

Contributor

MauriceG commented Apr 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Antonio-Laguna

Antonio-Laguna Apr 26, 2012

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

Antonio-Laguna commented Apr 26, 2012

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

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Apr 26, 2012

Contributor

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?

Contributor

frequent commented Apr 26, 2012

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?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 26, 2012

Contributor

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

Contributor

toddparker commented Apr 26, 2012

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

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 26, 2012

Contributor

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

Is there really a need to call it manually?

Contributor

MauriceG commented Apr 26, 2012

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

Is there really a need to call it manually?

@Antonio-Laguna

This comment has been minimized.

Show comment
Hide comment
@Antonio-Laguna

Antonio-Laguna Apr 27, 2012

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');

Antonio-Laguna commented Apr 27, 2012

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');
@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 27, 2012

Contributor

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.

Contributor

MauriceG commented Apr 27, 2012

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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 27, 2012

Contributor

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

Contributor

toddparker commented Apr 27, 2012

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

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 27, 2012

Contributor

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

Contributor

MauriceG commented Apr 27, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 14, 2012

Member

@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!

Member

jaspermdegroot commented Jun 14, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@Antonio-Laguna

Antonio-Laguna Jun 15, 2012

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

Antonio-Laguna commented Jun 15, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 15, 2012

Member

Fixed by commit 0992512.

Member

jaspermdegroot commented Jun 15, 2012

Fixed by commit 0992512.

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