title: Jquery mobile listview css on pageshow
body: <p>I try to load a json file and and put the content in a
  <strong>listview with flipswitches at the right side.</strong></p>
  
  <p>My HTML file with one example listview line, which is working fine
  (here without the first page and navbar to keep it clearly)</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="liststyle.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div data-role="page" data-theme="b" id="pagetwo"&gt;
    &lt;div data-role="main" class="ui-content" id="main"&gt;   
      &lt;ul data-role="listview" data-inset="true" id="alarmlist"&gt;
        &lt;li data-role="fieldcontain"&gt;
          &lt;a href="#pageone"&gt;Control&lt;/a&gt;
          &lt;select id="test-slider" data-role="slider" name="testslider"&gt;
            &lt;option value="off"&gt;off&lt;/option&gt;
            &lt;option value="on"&gt;on&lt;/option&gt;
          &lt;/select&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the linked liststyle.css</p>
  
  <pre><code>.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
      display: block !important;
      padding: 0,9em 75px 0,9em 15px !important;
  }
  div.ui-slider-switch {
      position: absolute;
      right: 0;
      width: 40%;
      top: 12.5%;
  }
  </code></pre>
  
  <p>and the code in the script.js file</p>
  
  <pre><code>$("#pagetwo").on("pageshow" , function() {
  
              var output = '';
              for (var x in data.alarm) {
                  output += '&lt;li data-role="fieldcontain"&gt;' +
                      '&lt;a href="#"&gt;' + data["alarm"][x]["time"] + 
                  '&lt;select data-role="slider"&gt;' + 
                  '&lt;option value="off"&gt;off&lt;/option&gt;' +
                  '&lt;option value="on"&gt;on&lt;/option&gt;&lt;/select&gt;' +
                  '&lt;/a&gt; &lt;/li&gt;';
  
              }
              $('#alarmlist').append(output).listview("refresh");
  });
  </code></pre>
  
  <p>Now i get this result:
  <a href="http://imageshack.com/a/img540/3844/dxuopI.png" rel="nofollow">http://imageshack.com/a/img540/3844/dxuopI.png</a></p>
  
  <p>When i delete the <code>.on("pageshow" , function() {</code> and run both pages from start,
  i get a bit better result but also an error.
  <a href="http://imageshack.com/a/img538/9508/89jtvd.png" rel="nofollow">http://imageshack.com/a/img538/9508/89jtvd.png</a></p>