Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-19 22:00:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added a workaround for the selectmenu plugin's nativeMenu in Opera. Opera browsers improperly support opacity on select elements, either hiding the menu button but not its text (in Mini), or hiding the text but not the button. Either way, it makes our hidden-select trick look really bad, or unusable. This workaround adds a class to the select in Opera, and makes the native menu visible. In the case of a false positive, that's not a bad outcome. Fixes #897

Browse source
This commit is contained in:
scottjehl 2011-02-02 12:04:18 -05:00
parent 110ba9e98e
commit b464b1bcec
2 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,14 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
//multi select or not
isMultiple = self.isMultiple = select[0].multiple;
//Opera does not properly support opacity on select elements
//In Mini, it hides the element, but not its text
//On the desktop,it seems to do the opposite
//for these reasons, using the nativeMenu option results in a full native select in Opera
if( o.nativeMenu && window.opera && window.opera.version ){
select.addClass( "ui-select-nativeonly" );
}
//vars for non-native menus
if( !o.nativeMenu ){

1
themes/default/jquery.mobile.forms.select.css
View file

@ -6,6 +6,7 @@
.ui-select { display: block; position: relative; }
.ui-select select { position: absolute; left: -9999px; top: -9999px; }
.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; height: 100%; opacity: 0.001; }
.ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; }
.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }