How To Set The Width Of A Jquery Mobile 1.4 Responsive Panel In Percentage?

I'm able to change the fixed width of a panel, by overriding the default JQM stylesheet. But now, in my mobile UI, i need to set the width of my fixed panel to a percentage value.

Solution 1:

You can get rid of the ui-responsive-panel class and then override the panel CSS to make it always 50%:

Make the panel 50% and I like to raise the z-index above the dismiss layer (optional):

.ui-panel {
    width: 50%;
    z-index: 1004;
}

When closed, set the right position to -50% and animate the full 100% width of the panel:

/* Panel right closed */.ui-panel-position-right {
    right: -50%;
}
/* Panel right closed animated */.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
    right: 0;
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

push the page content 50%:

/* Panel right open */.ui-panel-page-content-position-right {
    left: -50%;
    right: 50%;
}
/* Panel right open animated */.ui-panel-animate.ui-panel-page-content-position-right {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(-50%,0,0);
    -moz-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
}

set the width of the dismiss div to 50%:

/* Dismiss model open */.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 50%;
}

Updated FIDDLE