Why Collapsible headers don't stretch to full width?

Why Collapsible headers don't stretch to full width?


I cannot understand why this fails, but the collapsible headers appear with a plus and labeled on buttons as opposed to full screen wide bar/button.

Anyone know why? I have played using the examples listed on  http://api.jquerymobile.com/collapsible/ but no matter what, I get the same results both on iPad2 safari and my laptops Firefox21.

I can confirm my CSS is properly loaded because the theme's colours are fine. jQueryMobile library must also be loaded since the click event opens the underlying information (onto full wide screen rows - but the headers stay short).

All help appreciated!


<div data-role="page" id="page2">
<div class="ui-bar-a" data-role="header" data-position="fixed">
<h2>Header2</h2>
</div>

<div data-role="content" class="ui-bar ui-bar-e" id="page2">
<div data-role="collapsible">
<h3>Test 1</h3>
<p>This is a test</p>
</div>
<div data-role="collapsible">
<h3>Test 2</h3>
<p>This is another test</p>
</div>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</div>
<div data-fullscreen="false" data-role="footer" data-position="fixed" data-id="fixed-footer" align="right">
<a href="#home" data-role="button" data-icon="arrow-r" data-iconpos="right">Home</a>
</div>
</div>