javascriptcordovajquery-mobilefootercordova-3

Collapsible in footer does not expand to full width

I have upgraded my Phonegap/Cordova App to the latest Cordova, jQuery and jQuery Mobile versions. Now I am unable to have a collapsible div with full width. The below code gives me a full width in content part but in footer it only displays a limited width (used to work earlier):

<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content.</p>
</div>

Here is what I get:

enter image description here

Solution

  • As you can see from Inspecting the collapsible element in the footer is treated as a button and gets the display: inline-block css setting which makes it button size. Changing this to block enables full width.

    enter image description here

    CSS

    .ui-footer .ui-btn {
display: block !important;
}

    Demo

    http://jsfiddle.net/azhqam98/