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

External panel not height 100% #7983

Closed
cuongtallcat opened this Issue Mar 5, 2015 · 8 comments

Comments

Projects
None yet
5 participants
@cuongtallcat

Hi

I run demo: http://demos.jquerymobile.com/1.4.2/panel-external/
Rotate horizontal, click button Overlay to show panel, panel not full height

untitled

@Ruffio

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Mar 5, 2015

Ruffio commented Mar 5, 2015

@cuongtallcat

This comment has been minimized.

Show comment
Hide comment
@cuongtallcat

cuongtallcat Mar 5, 2015

I using Windows8, Chrome 40.0.2214.115 m, run with Device Mode: mobile

I using Windows8, Chrome 40.0.2214.115 m, run with Device Mode: mobile

@jonas-db

This comment has been minimized.

Show comment
Hide comment
@jonas-db

jonas-db Mar 6, 2015

Try using 1.4.5 instead of 1.4.2?

jonas-db commented Mar 6, 2015

Try using 1.4.5 instead of 1.4.2?

@cuongtallcat

This comment has been minimized.

Show comment
Hide comment
@cuongtallcat

cuongtallcat Mar 6, 2015

The same bug on 1.4.5

The same bug on 1.4.5

@cuongtallcat

This comment has been minimized.

Show comment
Hide comment
@cuongtallcat

cuongtallcat Mar 8, 2015

If using position fixed, the content on external panel not show all,
I try set panel fixed and have scroller (scroll-y) , but when i scroll it, the main content is scroll too.
untitled

If using position fixed, the content on external panel not show all,
I try set panel fixed and have scroller (scroll-y) , but when i scroll it, the main content is scroll too.
untitled

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 8, 2015

Contributor

I noticed this too. @arschmitz, @jaspermdegroot are panels supposed to be as tall as the document?

Contributor

gabrielschulhof commented Mar 8, 2015

I noticed this too. @arschmitz, @jaspermdegroot are panels supposed to be as tall as the document?

@gabrielschulhof gabrielschulhof self-assigned this Mar 8, 2015

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 8, 2015

Contributor

OK, yes. Internal panels are the length of the page, but externals are not.

Contributor

gabrielschulhof commented Mar 8, 2015

OK, yes. Internal panels are the length of the page, but externals are not.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Mar 8, 2015

Member

They are supposed to be as tall as the page, just like "internal" panels, so it is a bug. You can see this issue on every device/browser.
With external panels body instead of ui-page is the containing block. Because we set height: 99.9% for body it has the height of the viewport, and so has the absolutely positioned panel which we make the same height as its container.
Looking into changing that to min-height has not much use since our pages are absolutely positioned as well so the body won't get the same height as the page.

@arschmitz - I think we talked about switching to position: relative; (and maybe set absolute during transitions?) for page at some point. If I remember correctly that had to do with an issue with external toolbars. Only if we make that change we can fix this with CSS. For now only with JS.

Member

jaspermdegroot commented Mar 8, 2015

They are supposed to be as tall as the page, just like "internal" panels, so it is a bug. You can see this issue on every device/browser.
With external panels body instead of ui-page is the containing block. Because we set height: 99.9% for body it has the height of the viewport, and so has the absolutely positioned panel which we make the same height as its container.
Looking into changing that to min-height has not much use since our pages are absolutely positioned as well so the body won't get the same height as the page.

@arschmitz - I think we talked about switching to position: relative; (and maybe set absolute during transitions?) for page at some point. If I remember correctly that had to do with an issue with external toolbars. Only if we make that change we can fix this with CSS. For now only with JS.

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 8, 2015

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Mar 8, 2015

kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015

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