Panel with Collapsible Set and Listview set to em25 too wide in 'Overlay' Mode

Question

I have some nested recursive functions which dynamically create collapsible with listviews that are in a side panel. I found the default 17em to be too small, especially as the nested text starts to get short. So I found the styles in the css which set it and I overrode those to use 25em. This might be a bit too much after testing on some devices. However I digress.

The thing I am here to ask is why my collapsible overflows the panel when I use data-display="overlay", when I set it to 'reveal' it looks fine. I thought it might be all my nested content, so I made a fiddle with static content here: http://jsfiddle.net/LF6UR/

            <div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-position-fixed="true" data-swipe-close="true" data-dismissible="true">

and I can see it is not that, perhaps there is some other CSS property for the panel that I am not aware of. There seem to be lots of niggly little settings to get to know with this framework. Hope someone out there can help because I really think 'overlay' is better than pushing my main content area.

Answer 1

jQM adds a negative left and right margin to collapsibles within the collapsible set. You can override the margin like this:

.ui-collapsible-set .ui-collapsible{
    margin-left: 0;
    margin-right: 0;
}

Updated FIDDLE

Also, changing your collapsible set to data-inset="true" fixes the issue.

Answer 2

a solution without setting collapsibles to inset...which is important because I have nested collapsibles is to simply set the 'magic' .ui-panel-inner class which JQM puts in as an 'enhancement' but which makes it a bit difficult for traditional webdevelopers to know to apply styles to their controls.

.ui-panel-inner {
    /*width: 25em;*/
    padding: .2em 1.2em;
}

http://jsfiddle.net/magister/LF6UR/8/