title: How to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?
body: <p><strong>Is there a way to define the offset JQM uses for selectmenu overlay?</strong></p>
  <p>Other options can be set via prototyping like this:</p>
  <pre class="lang-js prettyprint-override"><code>$.mobile.page.prototype.options.addBackBtn   = true;
  $.mobile.page.prototype.options.backBtnTheme = &quot;a&quot;;
  </code></pre>
  <h2>Problem description</h2>
  <p>jQuery Mobile determines the size of the screen and decides how to display the overlay for select menus. Unfortunately this seems to work only without using a <strong>fixed</strong> header toolbar, because JQM is generation the source over here always with the top-offset of 30px <code>style=&quot;left: 741.65px; top: 30px;</code>.</p>
  <p>There is no ways to overwrite this with CSS only, because the specificity of the css rules are always lower than the ones of an style-attribute!</p>
  <p>I don't want to change the JQM sourcecode, because I'd have to change it again with every release. And I don't use the uncompressed sources.</p>
  <h3>Generated source from JQM</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop in&quot;
       style=&quot;left: 741.65px; top: 30px;&quot;&gt;
  </code></pre>
  <h2>Sample</h2>
  <p><a href="http://jsfiddle.net/V8AAB/" rel="nofollow noreferrer">http://jsfiddle.net/V8AAB/</a></p>
  <h2>JQM Source code</h2>
  <p>This is the corresponding code from jQuery Mobile 1.0RC2:</p>
  <pre class="lang-js prettyprint-override"><code>self.menuType = &quot;overlay&quot;;
  
  self.screen.height( $(document).height() ).removeClass( &quot;ui-screen-hidden&quot; );
  
  // Try and center the overlay over the button
  var roomtop = btnOffset - scrollTop,
      roombot = scrollTop + screenHeight - btnOffset,
      halfheight = menuHeight / 2,
      maxwidth = parseFloat( self.list.parent().css( &quot;max-width&quot; ) ),
      newtop, newleft;
  
  if ( roomtop &gt; menuHeight / 2 &amp;&amp; roombot &gt; menuHeight / 2 ) {
      newtop = btnOffset + ( self.button.outerHeight() / 2 ) - halfheight;
  } else {
      // 30px tolerance off the edges
      newtop = roomtop &gt; roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
  }
  </code></pre>