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?
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