collapsible extends width of page or boundary of dialog

collapsible extends width of page or boundary of dialog

 
Straight, raw... using it as a local page within a phonegap/cordova app (cordorva 2.0.0) but the cordorva libs are not loaded on this page:
 
Load and run this page and the collapsible extends beyond the side of the viewable area... convert it to a dialog and load it and the collapsible extends beyond the side of the dialog box.
  1. <!DOCTYPE HTML>
    <html>
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>Width Test</title> 
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css" />   
    <script src="jquery.mobile/jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>    
    </head>
    <body id="widthTest"> 
      <div id="widthPage" data-role="page">   
        <div data-role="header" data-position="fixed">
          <h1>Width Test</h1>
        </div>
        <div data-role="collapsible" data-collapsed="true" data-inset="true" data-theme="b" data-content-theme="b">
          <h3>Collapsible</h3>   
          <div class="ui-grid-solo">
            <div class="ui-block-a">
              <a href="#" data-role="button" data-theme="e">Test Button 1</a><br>
            </div>
          </div>
          <div class="ui-grid-solo">
            <div class="ui-block-a">
               <a href="#" data-role="button" data-theme="e">Test Button 2</a><br>
            </div>
          </div>
        </div> <!-- end of collapsibles -->
        <div class="ui-grid-solo">
       <div class="ui-block-a">
         <a href="#" data-role="button" rel="external" data-theme="e">Another Button</a>
          </div>
        </div>   
        <div id="widthtest-message"></div>
      </div><!-- end of page div -->
    </body>
    </html>