jQuery Panel reduces page content height? #5755

Closed
Don12 opened this Issue Mar 11, 2013 · 4 comments

Projects

None yet

2 participants

@Don12
Don12 commented Mar 11, 2013

Using google chrome debugger tools for setting screen resolution to something like 200 x 360 for http://jsbin.com/onibuc/302 illustrates an issue that I have been having with some of my mobile apps. This causes problems for both iScroll plugin(was able to fix this with a workaround) and also for pages with minimal content.

Here is a screenshot showing the content does not fill the page height:

Screen Shot 2013-03-11 at 2 54 30 PM

Here is a screenshot with the panel open at 300 x 360 showing that the content height is the same as the panel height:

Screen Shot 2013-03-11 at 2 57 57 PM

I had previous created an issue(#5712) that is similar to this one but I could not reproduce the issue until now.

I assume it is easier in asking a question by opening a new issue than reopening an older issue.

Don

@Don12
Don12 commented Mar 18, 2013

If this helps, there might be a connection to an issue I posted about Themeroller and Panels at jquery/themeroller.jquerymobile.com#132.

I found that my same temporary fix of using removeClass for Android works with this issue as the issue I posted there. It might be another issue here or this might be an issue for Themeroller where a panel allows horizontal scrolling with it open but only with a custom theme.

I used jQuery's removeClass method on the content wrapper for ui-body-b in my case. With Google Chrome initially noticed two vertical scrollbars. Removing ui-body-b from the content wrapper removed one scrollbar which solved height issues and removing ui-body-b removed the other and solved horizontal scroll issues.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Mar 27, 2013
@jaspermdegroot jaspermdegroot Core: Only set a default min-height for the page. Fixes #5755
resetActivePageHeight() only overrides the page min-height. Setting this for ui-mobile causes issues on small screens and according to the commit message (ead0baf) we don't really need it.
412fa36
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Mar 27, 2013
@jaspermdegroot jaspermdegroot Core: Only set a default min-height for the page. Fixes #5755
resetActivePageHeight() only overrides the page min-height. Setting this for ui-mobile causes issues on small screens and according to the commit message (ead0baf) we don't really need it.
8391f7d
@jaspermdegroot
Member

@Don12

Thanks for reporting the issue. The original issue wasn't a panel issue. Anyway, it has been fixed.

About the issue that you mention in your comment. The vertical scrollbar should be fixed by this commit 739e286. I can't reproduce the horizontal scrollbar problem.
Can you test again with latest code? If you still see the problem please open a new ticket here at the jQuery Mobile repo and provide a test page. See the contributing guidelines for instructions. Just copy your whole custom theme in a style block in the head if needed. Thanks!

I am going to close the issue at the ThemeRoller repo because I am pretty sure that, if it's still an issue, it can't have to do with this tool.

@Don12
Don12 commented Mar 27, 2013

@uGoMobi

The horizontal line was not a horizontal scroll bar. The line is the border of ui-body-b. Overriding the border to 0 or none for ui-body-b solved the vertical scrollbar problem as removing ui-body-b from the panel div and content wrap div.

Without the Custom Themeroller Styles, there is no verticle scrollbar. With the styles added, there is a verticle scrollbar. I submitted a new issue at #5819 with jQuery Mobile.

@Don12
Don12 commented Mar 27, 2013

This fix does make the line not as visible because it is now part of the border of the page viewport. +100 for this fix for smaller devices.

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