Search code examples
jquerycssjquery-mobilecollapsable

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

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.

Solution

  • 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/