Databases
StackOverflow2013
Postsdbo
POHow to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?
    text
    copied!<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 = "a"; </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="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="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop in" style="left: 741.65px; top: 30px;"&gt; </code></pre> <h2>Sample</h2> <p><a href="http://jsfiddle.net/V8AAB/" rel="nofollow">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 = "overlay"; self.screen.height( $(document).height() ).removeClass( "ui-screen-hidden" ); // 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( "max-width" ) ), 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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload