jQuery Mobile: make a collapsible element 100% width/NOT inset

Question

Is there a way to make a collapsible element/set in jQuery Mobile not inset? By default it makes the collapsible element as an inset item.

data-inset="false" does not alter the behavior.

Answer 1

If you give the margin-left and margin-right properties a negative value you can expand the collapsible content to the width of the page.

The default margin-top and margin-bottom values for a collapsible are 8px so we can write a CSS rule for this:

.ui-collapsible {
    margin : 8px -15px;
}

I chose -15px because that is the negative amount of padding that the data-role="content" element adds to each page.

Here is a jsfiddle to view what this does: http://jsfiddle.net/jasper/zSvqU/

Answer 2

You could always put the collapsible content block in data-role="header", but of course this is only okay if your collapsible content doesn't need to be somewhere in the middle of your page.