Permalink
Browse files

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

Fixes gh-8038
Closes gh-8037
  • Loading branch information...
kapilgarg1996 authored and arschmitz committed Mar 22, 2015
1 parent 3ee5450 commit e9d0ab62f83e479cec1e17ea0a3764cee7114ea9
Showing with 56 additions and 0 deletions.
  1. +11 −0 css/structure/jquery.mobile.forms.select.css
  2. +19 −0 tests/unit/select/index.html
  3. +26 −0 tests/unit/select/select_core.js
@@ -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% ;
}
@@ -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>
@@ -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() {

0 comments on commit e9d0ab6

Please sign in to comment.