Search code examples
javascriptcssjquery-mobileresponsive-designjquery-mobile-panel

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.

I found on SO many answers about how to set the CSS for a fixed width, and as well as for a panel with display: "push", but i was stuck after finding this style for the CSS 3D animation:

transform: translate3d(17em,0,0);

which doesn't accept (...at least until now) percentage values of the parent element.

Now i'm stretching my hairs without success with a javascript replacement, moreover because the CSS variables are not yet inside my browser target.

This is my markup:

<body class="ui-responsive-panel">
    <div data-role="header">
         <h1>Header</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>
    <div data-role="footer">
         <h4>Footer</h4>
    </div>
    <div data-role="page" id="home">
        <div data-role="content" class="ui-content">
            <p>pPage content</p>
        </div>
    </div>
    <div data-role="panel" id="nav-panel">
        <p>Panel content</p>
    </div>
</body>

Header, footer and panel are outside the other mobile pages, and are initialized as described in the JQM documentation for JQM 1.4:

$("[data-role='header'], [data-role='footer']").toolbar({
    theme: "a"
});

$("#nav-panel").panel({
    theme: "b",
    display: "push",
    position: "right",
    positionFixed: true
}).enhanceWithin();

http://jsfiddle.net/e6Cnn/25/

Is there a way to have a responsive panel which is taking 50% of the available screen width?

FINAL RESULT: http://jsfiddle.net/e6Cnn/30/

UPDATE: if someone interested, after more test in mobile browsers, i came up with another solution: http://jsfiddle.net/e6Cnn/37/

Solution

  • 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