Is there a way to define the offset JQM uses for selectmenu overlay?
Other options can be set via prototyping like this:
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnTheme = "a";
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 fixed header toolbar, because JQM is generation the source over here always with the top-offset of 30px style="left: 741.65px; top: 30px;
.
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!
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.
<div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop in"
style="left: 741.65px; top: 30px;">
This is the corresponding code from jQuery Mobile 1.0RC2:
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 > menuHeight / 2 && roombot > menuHeight / 2 ) {
newtop = btnOffset + ( self.button.outerHeight() / 2 ) - halfheight;
} else {
// 30px tolerance off the edges
newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
}
Suggested Fix:
.ui-selectmenu { z-index: 1100 !important; }