The slider is broke?

The slider is broke?

They work fine but as soon as you put them inside of any grid (ui-grid-a, ui-grid-b, etc) the handle is offset to the right.



  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>SLIDER FAIL</title>
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  7.     <style type="text/css">
  8.     </style>
  9.     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  10.     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  11. </head>
  12. <body>
  13.     <div data-role="page" data-theme="e">
  14.         <div data-role="header">
  15.             <h1>SLIDER FAIL HEADER</h1>
  16.         </div>
  17.         <div data-role="content">
  18.              slider | check
  19.              <br />
  20.              ui-grid | check
  21.              <br />
  22.              slider + ui-grid = the slider handle is offset
  23.              <br />
  24.              <br />
  25.             <div class="ui-grid-a" style="border:1px solid orange;">
  26.                 <br />
  27.                 <select data-role="slider">
  28.                     <option>Cotton</option>
  29.                     <option>Candy</option>
  30.                 </select>
  31.                 <br />
  32.                 <br />
  33.             </div>
  34.             <br />
  35.             <div class="ui-grid-a" style="border:1px solid orange;">
  36.                 <div class="ui-block-a" style="border:1px solid Black;">
  37.                     <select data-role="slider" data-theme="b">
  38.                         <option>Trix</option>
  39.                         <option>Golden Grahams</option>
  40.                     </select>
  41.                 </div>
  42.                 <div class="ui-block-b" style="border:1px solid Black;">
  43.                     <select data-role="slider" data-theme="b">
  44.                         <option>Cats</option>
  45.                         <option>Dogs</option>
  46.                     </select>
  47.                 </div>
  48.             </div>    
  49.             <br />
  50.         </div>
  51.         <div data-role="footer">
  52.             <h4>SLIDER FAIL FOOTER</h4>
  53.         </div>
  54.     </div>
  55. </body>
  56. </html>