title: Need to fix IOS-specific styling of my GroupList (IOS Sticky Headers) control
body: <p>I have put this all in a sample website at:</p>
  
  <h2><a href="http://grouplist.azurewebsites.net" rel="nofollow noreferrer">http://grouplist.azurewebsites.net</a></h2>
  
  <p>I could not port it to a JSFiddle (the cut/paste styling was completely ignored when I tried, but maybe someone else could try).</p>
  
  <p>Basically I built an IOS style group list in jQuery but my <em>conditional ISO styling</em> does not seem to work:</p>
  
  <pre><code>[data-ios="true"] .groupList-Fake
  {
      right: 0; /* no scrollbars in iOS devices */
      width: 100%;
  }
  </code></pre>
  
  <h2>The site looks like this on standard web:</h2>
  
  <p><img src="https://i.stack.imgur.com/XTMWB.png" alt="enter image description here"></p>
  
  <h2>but the site looks like this on an iPhone:</h2>
  
  <p><img src="https://i.stack.imgur.com/BaSku.png" alt="enter image description here"></p>
  
  <p>The fake header does not fill the full width of the control.</p>
  
  <p>The relevant css is below (generated from .LESS hence a little wordy):</p>
  
  <pre><code>.groupList-Wrapper {
      position: relative;
      height: 300px;
      width: 100%;
      margin: 10px;
      overflow: hidden;
  }
  
  .groupList-Wrapper .groupList-Header {
      background: #B8C1C8;
      padding: 2px 0 0 12px;
      color: #FFF;
      font: normal 18px/21px Helvetica, Arial, sans-serif;
      text-shadow: 0 1px #646A6E;
      -moz-text-shadow: 0 1px #646A6E;
      -webkit-text-shadow: 0 1px #646A6E;
      border-bottom: 1px solid #989EA4;
      border-top: 1px solid #717D85;
  }
  
  .groupList-Wrapper .groupList-Header.groupList-Fake {
      position: absolute;
      top: 0;
      z-index: 1000;
      width: auto;
      left: 0;
      right: 15px;
  }
  
  .groupList-Wrapper .groupList {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow-y: auto;
      position: relative;
      height: 100%;
  }
  
  .groupList-Wrapper .groupList .groupList-Group .groupList-Items {
      margin: 0;
      padding: 0;
      top: 80px;
  }
  
  .groupList-Wrapper .groupList .groupList-Group .groupList-Items .groupList-Item {
      font: normal 20px/45px Helvetica, Arial, sans-serif;
      list-style: none;
      margin: 0;
      padding: 0 0 0 12px;
      border-top: 1px solid #CCC;
      background-color: #f9faf9;
  }
  
  [data-ios="true"] .groupList-Fake {
      right: 0;
      /* no scrollbars in iOS devices */
      width: 100%;
  }
  </code></pre>
  
  <p>I based it loosely on the IOSList at <a href="https://github.com/brianhadaway/iOSList" rel="nofollow noreferrer">https://github.com/brianhadaway/iOSList</a> but that one did not meet my needs (and I wanted touch &amp; momentum scrolling, variable height elements, list <em>and</em> div support etc)</p>
  
  <p>I have tried making the selector more specific, but no luck:</p>
  
  <pre><code>[data-ios="true"] .groupList-Wrapper .groupList-Header.groupList-Fake {
  </code></pre>