I didn't wanted to make modifications to the library css file so I tried above patches but none of them worked on jquery mobile 1.4.1
I had to add few more styling to get it to work.
Here is my modified css. (replace 10em and 15 em with your left and right size respectively)
.ui-panel {
width: 10em;
}
.ui-panel.ui-panel-position-right {
width: 15em;
}
.ui-panel.ui-panel-closed {
width: 0;
}
.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(-10em, 0, 0);
-moz-transform: translate3d(-10em, 0, 0);
transform: translate3d(-10em, 0, 0)
}
.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(15em, 0, 0);
-moz-transform: translate3d(15em, 0, 0);
transform: translate3d(15em, 0, 0)
}
.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(10em, 0, 0);
-moz-transform: translate3d(10em, 0, 0);
transform: translate3d(10em, 0, 0)
}
.ui-panel-animate.ui-panel-page-content-position-left{
-webkit-transform: translate3d(10em, 0, 0);
-moz-transform: translate3d(10em, 0, 0);
transform: translate3d(10em, 0, 0);
}
.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(-15em, 0, 0);
-moz-transform: translate3d(-15em, 0, 0);
transform: translate3d(-15em, 0, 0)
}
Panels have a fixed width of 17em (272 pixels) which is narrow enough to still show some of the page contents when open to make clicking out to close easy, while still looking good on wider tablet or desktop screens. The styles to set widths on panels are fairly complex but these can be overridden with CSS as needed.
– Jay Mayu Mar 5 '13 at 17:20