Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-21 00:10:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes issue #1036 partially offscreen rendering of select menu

Browse source 
https://github.com/jquery/jquery-mobile/issues/issue/1036

The css styles the select menu with a width of 80% with a max-width of
350px. This fix checks if width of select menu is less than max-width.
If that is the case the select menu is centered on screen. If not it
checks if the rigth or left side of the select menu are outside the
viewport and if so moves the select menu inside the viewport with a 30px
tolerance.
This commit is contained in:
chrsMon 2011-02-13 21:11:53 +01:00
parent 265f6d9ca8
commit bbee2fdb2b
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
js/jquery.mobile.forms.select.js
View file

@ -405,8 +405,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
if( this.options.disabled || this.options.nativeMenu ){ return; }
var self = this,
menuHeight = self.list.outerHeight(),
menuWidth = self.list.outerWidth(),
menuHeight = self.list.parent().outerHeight(),
menuWidth = self.list.parent().outerWidth(),
scrollTop = $(window).scrollTop(),
btnOffset = self.button.offset().top,
screenHeight = window.innerHeight,
@ -455,6 +455,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
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 ){
@ -465,8 +466,17 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
}
newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2;
if (menuWidth < maxwidth) {
newleft = (screenWidth - menuWidth) / 2;
} else {
newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2;
// 30px tolerance off the edges
if (newleft < 30) {
newleft = 30;
} else if ((newleft + menuWidth) > screenWidth) {
newleft = screenWidth - menuWidth - 30;
}
}
self.listbox
.append( self.list )