Merge pull request jquery-archive#1710 from gseguin/issue-1338

Issue 1338

Author: Scott Jehl

tests/unit/select/index.html

@@ -239,6 +239,13 @@ <h2 id="qunit-userAgent"></h2>
 			<option value="overnight">Overnight</option>
 		</select>
 	</div>
+
+	<div data-nstest-role="fieldcontain" id="select-long-option-label-container">
+		<select name="select-long-option-label" id="select-long-option-label">
+			<option value="short">Choice 1</option>
+			<option value="long">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</option>
+	    </select>
+	</div>
 </div>
 </body>
 </html>

tests/unit/select/select_core.js

@@ -95,4 +95,33 @@
 		$.testHelper.sequence(sequence, 1000);
 	});
 
+	module("Non native menus", {
+		setup: function() {
+			$.mobile.selectmenu.prototype.options.nativeMenu = false;
+		},
+		teardown: function() {
+			$.mobile.selectmenu.prototype.options.nativeMenu = true;
+		}
+	});
+
+	asyncTest( "a large select option should not overflow", function(){
+		// https://github.com/jquery/jquery-mobile/issues/1338
+		var menu, select = $("#select-long-option-label");
+
+		$.testHelper.sequence([
+			function(){
+				// bring up the dialog
+				select.trigger("click");
+			},
+
+			function() {
+				menu = $(".ui-selectmenu-list");
+
+				equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow")
+				start();
+			}
+		], 500);
+
+	});
+
 })(jQuery);

themes/default/jquery.mobile.forms.select.css

@@ -17,8 +17,8 @@
 label.ui-select { font-size: 16px; line-height: 1.4;  font-weight: normal; margin: 0 0 .3em; display: block; }
 
 /*listbox*/
-.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: inline-block; min-height: 1em; }
-.ui-select .ui-btn-text { text-overflow: ellipsis; overflow: hidden; display: block;}
+.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; }
+.ui-select .ui-btn-text { text-overflow: ellipsis; overflow: hidden;}
 
 .ui-selectmenu { position: absolute; padding: 0; z-index: 100 !important; width: 80%; max-width: 350px; padding: 6px; }
 .ui-selectmenu .ui-listview { margin: 0; }