Skip to content
This repository

jQuery Panel reduces page content height? #5755

Closed
Don12 opened this Issue · 4 comments

2 participants

Don12 Jasper de Groot
Don12
Don12 commented

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

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.

Jasper de Groot jaspermdegroot closed this issue from a commit
Jasper de Groot 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
Jasper de Groot jaspermdegroot referenced this issue from a commit
Jasper de Groot 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
Jasper de Groot
Collaborator

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

Jasper de Groot jaspermdegroot referenced this issue in jquery/themeroller.jquerymobile.com
Closed

Custom theme from Themeroller causes Panel issues #132

Don12
Don12 commented

@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

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
Something went wrong with that request. Please try again.