jQuery Mobile panel width

Question

In the new jQuery mobile there is a new panel option. I have implemented this and it works, but I would like to customize the width of the panel. The standard width is 272px, which is a bit much for my use. I have tried using the

.ui-panel{width:150px;}

CSS selector, but this simply resizes the contents of the panel. The panel itself stays visible and remains the same width. Using the inspectors in firefox and chrome I have not been able to find the correct div responsible for this panel. Could anybody help me find a way to resize the panel in the correct manner?

Answer 1

you need to put the following css (left panel)

.ui-panel{
    width: 150px!important;
}

.ui-panel-animate.ui-panel-page-content-position-left {

    transform: translate3d(150px,0,0) !important;
}

Answer 2

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)
}

Answer 3

If you don't want to globally edit the size, add this to your custom css adding IDs where necessary, changing 23em to your desired width:

Note: This is only for the left side.

.ui-panel {
    width: 23em;
}
.ui-panel-position-left {
    left: -23em;
}
/* positioning: content wrap, fixed toolbars and dismiss */
/* panel left open */
.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: 23em;
    right: -23em;
}
/* animated: panel left open (for reveal and push) */
.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(23em,0,0);
    -moz-transform: translate3d(23em,0,0);
    transform: translate3d(23em,0,0);
}

Answer 4

I had same issue myself and followed tylerl's advice to replace 17em with the width I needed. Which worked well, except for the fact that I was using google cdn to load css, so I could not change it directly and in general I am not a big fan of changing library code.

So playing around with it a little I came up with this code for redefining default jquery mobile's css https://gist.github.com/geekdevs/5433246

You can configure width for left and right sidebars separately. This is LESS code, but simply replacing @left-sidebar-width and @right-sidebar-width with the width you need will make it work for plain CSS as well.

Answer 5

I figured it out! It's not that complex, really. I myself am just using structure.css but if you're using other CSS files there MAY be more to customize. Anyway...

Using your favorite editor, do a find & replace for "17em" and replace that with the value you actually want. There's styling for left panels and styling for right panels. I wouldn't rush through this whole process as there could be an unrelated "17em" here or there. It just takes a minute...

It's a simple answer but I'm happy with myself :p

Answer 6

They show how to change the panel width in this demo: http://jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html

Answer 7

I think you've made a typo. Try

.ui-panel { width: 150px; }

or if you're issuing that inline, perhaps

<panel style="width: 150px;">

Of course, new as I am to jquery, I could be wrong.