jQuery Mobile panel width

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


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.


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