panelHeight() calcualte the contents 'margin-top' bug

[keepallsimple]

i use the JQM 1.2.0-rc2, and foud an issue in panelheight() function when calcualte the conents margin-top and margin-bottom:

in multiview.js line 1238:

                    ct.css({    "max-height": setH, 
                                "margin-top": blacklist == true ? glbH + lclH : 0, 
                                "margin-bottom": blacklist == true ? glbF + lclF  : 0
                            })
                    }

when the blacklist is false, the margin-top and margin-bottom value is set to 0, infact ,it should be lclH and lclF.

is right?

[frequent]

panelHeight and panelWidth are both bummers.... hard to get right and slowing things down considerably. Adding to the confusing is the default padding Jquery Mobile is setting on pages, which most of the times ends up on wrapper and nested pages alike. Anyway...

Let me check. Probably you are correct.

[sstraus]

I have the same problem with JQM 1.2.0. Looks like JQM doesn't adds 43px padding anymore. Do you think that is safe to remove the blacklist check from ct.css?

[frequent]

I found out what's causing it. Whenever you have a fixed header/footer, JQM is adding a class of ui-page-header|footer-fixed to the page, which then sets the padding.

I fixed this for non-overthrow mode yesterday (not commited yet):

Try adding this to your CSS:

 /* override fixed footer and header padding on nested page */
.ui-panel .ui-page-header-fixed                     { padding-top: 0 !important; }
.ui-panel .ui-page-footer-fixed                     { padding-bottom: 0 !important;}

and see if it works.

[frequent]

I will try to update to JQM 1.2.0 sometimes end of next week. I need to have the current multiview version working while I'm testing on another project.

[sstraus]

No, it doesn't fix. I'm tring variants but nothing works as expected.

[frequent]

This is such a pain in the a... If I'm spending time on mv, I'm always sitting over content height & width functions...

[sstraus]

Please take a look at this issue. Is really frustrating.
Thanks.

[sstraus]

there is some hope for overthrow ? I know that you're very busy, but I'm in troble with the iPad.

[frequent]

ok. I'm on it. Let's see what I can do.

[frequent]

@sstraus , @keepallsimple

Ok.Please try and add this to your CSS file:

.ui-overthrow-mode div[data-wrapper="true"] { 
    padding-top: 0px !important; 
    padding-bottom: 0px !important;
    }

This overwrites padding top/bottom on the wrapper page, too, which caused this page to be too "long" and false scrollbars to appear.

Does this take care of your problem?

The blacklist and margin I need because otherwise the content will "fall" behind the toolbars. This is because blacklist = does not support fixed toolbars. For these devices, JQM changes to position:absolute, which takes the element out of the page flow and causes the following elements (content) to start from the top of the page. If position:fixed is supported, the header/footer stay in the page flow, so you don't need margin to push them out from underneath the toolbars. I hope this is correct and you understand what I mean.

Sorry for taking so long... please let me know if this fixes your problem. If not I will have another look.

Cheers

[sstraus]

I'm sorry but doesn't work. CSS are applied correctly to the div but the content is still shifted up.

[sstraus]

BTW, my problem is not related to scrollbars, panels are hidden by the topbar. Adding a top margin of 43px to the page container, is a workaround to fix the problem. But I can't undertand why you don't have this issue. On my app is present also in chrome.

[frequent]

ok. I managed to reproduce now. I never understood what the problem really was. I think I have it fixed. Will commit today.

[sstraus]

Can you share a hint on how to fix it?

[frequent]

first hint:
Problem for me was that I had a fixed footer on the nested page (a page in main/menu). Since it was fixed footer, JQM moved it to pos:abs/fixed bottom of the screen but it's margin was still on the nested page.

I removed the footer, which also cleared the margin. It should also work if you don't set footers on nested pages to pos:fixed.

---

From: sstraus [email protected]
To: frequent/multiview [email protected]
Cc: Sven Franck [email protected]
Sent: Tuesday, October 30, 2012 8:07 AM
Subject: Re: [multiview] panelHeight() calcualte the contents 'margin-top' bug (#46)

Can you share a hint on how to fix it?
—
Reply to this email directly or view it on GitHub.

[sstraus]

Thank you, but this is not my case because I have just one fixed footer on the main page. Other options?