jQuery Mobile panel width (full width) problem on Android
Hi:
I am using jQuery mobile version 1.3.2 and I change the panel widths (left a little larger 18em and right width 100%) through css. So the left panel will open with width (18em), and the right panel will open with full width (100%). Here is my css section that will override the jQuery mobile css.
.ui-panel {
width:18em;
}
.ui-panel.ui-panel-position-right {
width:100%;
}
.ui-panel-position-left {
left: -18em;
}
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
-webkit-transform: translate3d(-18em, 0, 0);
-moz-transform: translate3d(-18em, 0, 0);
transform: translate3d(-18em, 0, 0)
}
.ui-panel-position-right {
right:-100%;
}
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: 18em;
right:100%;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(18em, 0, 0);
-moz-transform: translate3d(18em, 0, 0);
transform: translate3d(18em, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -18em;
right:100%;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
@media (min-width:55em) {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right:100%;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: 18em;
}
}
Basiclly, I just copy whatever in the original css for panels and make these changes. On my iphone, ipad, desktop (windows 7) using firefox, chrome, opera, safari, they all look fine with the right panel open full width.
but on a pad (lenovo) running android 2.3.4, there is a problem. the right panel only opens the same amount as the left panel, and what is more is that the content of the right panel is clipped. by this i mean, the right panel opens from the right but not full width, so there is some part of the screen (left side) that displays the content (or center) panel. also the content of the right panel is not fully displayed. part of the content (a portion of the left part) is gone. Here is the user agent from the android browser
Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; A1_07 Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Perhaps I am just missing something in the css. Does anyone have any idea what the problem might be? Thanks to all in advance.
ftc