0

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.

matthewbaskey
  • 1,027
  • 2
  • 17
  • 40

2 Answers2

2

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.

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • Thanks for the response, yes it works, but it will inset every collapsible then, and I have collapsibles nested inside. If I inset every one of them, which is more intuitive for navigation I run out of space of the text the deeper it goes. – matthewbaskey Mar 20 '14 at 10:16
  • Here is a fiddle of what I mean.. http://jsfiddle.net/magister/LF6UR/3/ – matthewbaskey Mar 20 '14 at 10:31
  • Here I try to add a custom css class just to the 1st level, but of course the jqm css overwrites it which mean all nested collapsibles are also inset http://jsfiddle.net/magister/LF6UR/5/ – matthewbaskey Mar 20 '14 at 10:42
  • Look under Header 2 to see the nested collapsible – matthewbaskey Mar 20 '14 at 10:45
  • can I do this without 'inset'ing all collasibles – matthewbaskey Mar 20 '14 at 10:46
  • use !important to override CSS. See if this works for you: http://jsfiddle.net/ezanker/LF6UR/6/ , you can tweak the margins to your tase... – ezanker Mar 20 '14 at 14:40
0

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/

matthewbaskey
  • 1,027
  • 2
  • 17
  • 40