Question

I’m having an issue with a jQuery Mobile collapsible div not shrinking any narrower when the page is reduced in width (i.e. as seen on a mobile device). I have it so every other element on the page scales appropriately (width), but the collapsible divs are over-stretching their bounds and I can’t get them smaller (wider than the page width).

Cutting off the header label for the collapsible IS ok, I just dont know how. I feel this might be more of a conceptual question, but I post some of the code just for reference:

<table id="DataTable" style="width:100%" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div id="row" class="Collapsible" data-role="collapsible" data-theme="c" data-content-theme="c" style="margin:0">
        <h3>Example header label (Can be covered)</h3>
        <p>Contents of the div on expand</p>
      </div>
    </td>
  </tr>
</table>

Answer 1

I think the problem is the css definition for .ui-btn-inner: white-space: nowrap;.
Try overwriting it with:

.ui-btn-inner {
    white-space: normal !important;
}

Also see this example.

=== UPDATE ===

You can add following css to change the collapsible div (and h3) to inline elements:

.Collapsible, .Collapsible h3 {
    display: inline !important;
}

Also see my updated example.