Selectmenu: Adds max-width constraint to multi inline select menu

Fixes gh-8038
Closes gh-8037

css/structure/jquery.mobile.forms.select.css

@@ -38,10 +38,12 @@
 		opacity: 0.0001;
 	}
 }
+
 /* Display none because of issues with IE/WP's filter alpha opacity */
 .ui-select .ui-state-disabled select {
 	display: none;
 }
+
 /* Because we add all classes of the select and option elements to the span... */ 
 .ui-select span.ui-state-disabled {
 	filter: Alpha(Opacity=100);
@@ -56,6 +58,7 @@
 	text-indent: 0;
 	display: block;
 }
+
 /* ui-li-count is styled in the listview CSS. We set padding and offset here because select supports icon position while listview doesn't. */
 .ui-select .ui-li-has-count.ui-btn {
 	padding-right: 2.8125em;
@@ -66,10 +69,12 @@
 .ui-select .ui-btn-icon-right .ui-li-count {
 	right: 3.2em;
 }
+
 /* Count indicator position must be different for mini version. */
 .ui-select.ui-mini .ui-btn-icon-right .ui-li-count {
 	right: 2.5em;
 }
+
 /* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
 .ui-select .ui-btn > span:not(.ui-li-count) {
 	display: block;
@@ -101,6 +106,7 @@
 	-webkit-border-bottom-left-radius: 0;
 	border-bottom-left-radius: 0;
 }
+
 /* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button.  this shim's content in there */
 .ui-selectmenu.ui-popup .ui-header h1:after {
 	content: '.';
@@ -139,3 +145,8 @@
 .ui-selectmenu .ui-selectmenu-placeholder {
 	display: none;
 }
+
+/* This is necessary because multi inline select menu hides if width exceeds device width. */
+.ui-select.ui-btn-inline {
+	max-width: 100% ;
+}

tests/unit/select/index.html

@@ -43,6 +43,25 @@
 			<option value="4">The 4th Option</option>
 			</select>
 		</div>
+		<div id="width-test-container">
+			<div data-role="fieldcontain">
+				<label for="width-test">Multiple:</label>
+				<select name="width-test" id="width-test" multiple data-inline="true" data-nstest-native-menu="false" data-nstest-overlay-theme="b" data-nstest-theme="x">
+				<option>Choose options</option>
+				<option value="1">The 1st Option</option>
+				<option value="2" selected="selected">The 2nd Option</option>
+				<option value="3" selected="selected">The 3rd Option</option>
+				<option value="4">The 4th Option</option>
+				<option value="5">The 5th Option</option>
+				<option value="6">The 6th Option</option>
+				<option value="7">The 7th Option</option>
+				<option value="8">The 8th Option</option>
+				<option value="9">The 9th Option</option>
+				<option value="10">The 10th Option</option>
+				<option value="11">The 11th Option</option>
+				</select>
+			</div>
+		</div>
 		<select class="no-id-test">
 			<option>Choose options</option>
 			<option value="1">The 1st Option</option>

tests/unit/select/select_core.js

@@ -42,6 +42,32 @@
 			"Checkboxes should not have ui-checkbox-on class" );
 	});
 
+	module( "Custom select Multiple Inline" ) ;
+
+	test( "Custom select multiple inline width is adjusted correctly", function() {
+		var selectMenu = $( "#width-test" ),
+			parent = selectMenu.parent(),
+			widths = [ 100, 250, 500, 1000 ],
+			finalResult = 0,
+			result = 0;
+
+		$.each( widths, function( index, width ){
+			parent.css( {"width": width+"px"} );
+			selectMenu
+				.find( "option" )
+					.prop( "selected", true )
+				.end();
+			selectMenu.selectmenu( "refresh" );
+			result = selectMenu.width() < parent.width() ? 1 : 0;
+			if ( result === 1 ) {
+				finalResult += 1;
+			}
+		});
+
+		strictEqual( finalResult, 4, 
+			"select menu width should not exceed parent's width" );
+	});
+
 	module( "Native select" );
 
 	test( "Select menu ID", function() {