Permalink
Browse files

Select: Fixed custom select style issues.

  • Loading branch information...
1 parent 0d9857e commit 2451b0b99ad8d02e1367827741323d40f870ad91 @jaspermdegroot jaspermdegroot committed May 27, 2013
Showing with 28 additions and 21 deletions.
  1. +20 −3 css/structure/jquery.mobile.forms.select.css
  2. +8 −18 js/widgets/forms/select.custom.js
@@ -72,28 +72,43 @@
overflow: hidden !important;
white-space: nowrap;
}
-.ui-selectmenu {
+
+.ui-selectmenu.ui-popup {
min-width: 11em;
}
+
+.ui-selectmenu .ui-dialog-contain {
+ overflow: hidden;
+}
+
.ui-selectmenu .ui-header {
margin: 0;
padding: 0;
border: 0;
}
+.ui-selectmenu.ui-dialog .ui-header {
+ z-index: 1;
+ position: relative;
+}
.ui-selectmenu.ui-popup .ui-header {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-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-header h1:after {
+.ui-selectmenu.ui-popup .ui-header h1:after {
content: '.';
visibility: hidden;
}
.ui-selectmenu .ui-header .ui-title {
margin: 0 2.875em;
}
+.ui-selectmenu.ui-dialog .ui-content {
+ overflow: visible;
+ z-index: 1;
+}
+
.ui-selectmenu .ui-selectmenu-list {
margin: 0;
-webkit-border-radius: inherit;
@@ -106,14 +121,16 @@
border-top-left-radius: 0;
}
.ui-header.ui-screen-hidden + .ui-selectmenu-list li.ui-first-child .ui-btn {
- border-bottom-width: 0;
+ border-top-width: 0;
}
.ui-selectmenu .ui-selectmenu-list li.ui-last-child .ui-btn {
border-bottom-width: 0;
}
+
.ui-selectmenu .ui-btn.ui-li-divider {
cursor: default;
}
+
.ui-screen-hidden,
.ui-selectmenu .ui-selectmenu-placeholder {
display: none;
@@ -33,33 +33,23 @@ define( [
isMultiple = widget.isMultiple = widget.select[ 0 ].multiple,
buttonId = selectID + "-button",
menuId = selectID + "-menu",
- menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' id='" + dialogID + "' data-" + $.mobile.ns + "theme='" + widget.options.theme + "' data-" + $.mobile.ns + "overlay-theme='" + widget.options.overlayTheme + "'>" +
+ themeAttr = widget.options.theme ? " data-" + $.mobile.ns + "theme='" + widget.options.theme + "'" : "",
+ overlayThemeAttr = widget.options.overlayTheme ? " data-" + $.mobile.ns + "theme='" + widget.options.overlayTheme + "'" : "",
+ dividerThemeAttr = ( widget.options.dividerTheme && isMultiple ) ? " data-" + $.mobile.ns + "divider-theme='" + widget.options.dividerTheme + "'" : "",
+ menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu' id='" + dialogID + "'" + themeAttr + overlayThemeAttr + ">" +
"<div data-" + $.mobile.ns + "role='header'>" +
"<div class='ui-title'>" + label.getEncodedText() + "</div>"+
"</div>"+
"<div data-" + $.mobile.ns + "role='content'></div>"+
"</div>" ),
listbox = $( "<div id='" + popupID + "' class='ui-selectmenu'>" ).insertAfter( widget.select ).popup({ theme: widget.options.overlayTheme }),
+
+ list = $( "<ul class='ui-selectmenu-list' id='" + menuId + "' role='listbox' aria-labelledby='" + buttonId + "'" + themeAttr + dividerThemeAttr + ">" ).appendTo( listbox ),
- listThemeAttr = ( widget.options.theme ) ? " data-" + $.mobile.ns + "theme='" + widget.options.theme + "'" : "",
+ header = $( "<div class='ui-header ui-bar-" + ( widget.options.theme ? widget.options.theme : "inherit" ) + "'>" ).prependTo( listbox ),
- dividerThemeAttr = ( widget.options.dividerTheme && isMultiple ) ? " data-" + $.mobile.ns + "divider-theme='" + widget.options.dividerTheme + "'" : "",
-
- list = $( "<ul" + listThemeAttr + dividerThemeAttr + ">", {
- "class": "ui-selectmenu-list",
- "id": menuId,
- "role": "listbox",
- "aria-labelledby": buttonId
- }).appendTo( listbox ),
-
- header = $( "<div>", {
- "class": "ui-header ui-bar-inherit"
- }).prependTo( listbox ),
-
- headerTitle = $( "<h1>", {
- "class": "ui-title"
- }).appendTo( header ),
+ headerTitle = $( "<h1 class='ui-title'>" ).appendTo( header ),
menuPageContent,
menuPageClose,

0 comments on commit 2451b0b

Please sign in to comment.