From bbee2fdb2b81f1e8e047b33b849f82d43ecbb0b1 Mon Sep 17 00:00:00 2001
From: chrsMon <chr.mntn@gmail.com>
Date: Sun, 13 Feb 2011 21:11:53 +0100
Subject: [PATCH] Fixes issue #1036 partially offscreen rendering of select
 menu

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.
---
 js/jquery.mobile.forms.select.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js
index 508d1d2f..0b115e9b 100644
--- a/js/jquery.mobile.forms.select.js
+++ b/js/jquery.mobile.forms.select.js
@@ -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 )