diff --git a/css/structure/jquery.mobile.controlgroup.css b/css/structure/jquery.mobile.controlgroup.css index 13636052..509b03c5 100644 --- a/css/structure/jquery.mobile.controlgroup.css +++ b/css/structure/jquery.mobile.controlgroup.css @@ -10,9 +10,11 @@ .ui-controlgroup li { list-style: none; } .ui-controlgroup-vertical .ui-btn, .ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; } +.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; } + .ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; } .ui-controlgroup-horizontal { padding: 0; } -.ui-controlgroup-horizontal .ui-btn { display: inline-block; margin: 0 -5px 0 0; } +.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select { display: inline-block; margin: 0 -5px 0 0; } .ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; margin: 0 -1px 0 0; } .ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn, .ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; } @@ -25,5 +27,7 @@ @media all and (min-width: 450px){ .ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; } - .ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; } + .ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; } + .ui-field-contain .ui-controlgroup .ui-select { width: 100%; } + .ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.forms.select.css b/css/structure/jquery.mobile.forms.select.css index 53f103b1..0f857f12 100644 --- a/css/structure/jquery.mobile.forms.select.css +++ b/css/structure/jquery.mobile.forms.select.css @@ -30,7 +30,7 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi .ui-li.ui-selectmenu-placeholder { display: none; } .ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; } -@media all and (min-width: 450px){ +@media all and (min-width: 450px){ .ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; } .ui-field-contain .ui-select { width: 60%; display: inline-block; } } diff --git a/docs/forms/selects/index.html b/docs/forms/selects/index.html index 09ea37ab..7ae82e53 100644 --- a/docs/forms/selects/index.html +++ b/docs/forms/selects/index.html @@ -174,6 +174,150 @@ --> +

Vertically grouped select inputs

+ +

To create a grouped set of select inputs, first add select and a corresponding label. Set the for attribute of the label to match the ID of the select so they are semantically associated.

+ +

Because the label element will be associated with each individual select input, we recommend wrapping the selects in a fieldset element that has a legend which acts as the combined label for the grouped inputs.

+ +

Lastly, one needs to wrap the fieldset in a div with data-role="controlgroup" attribute, so it can be styled as a group.

+ +
	
+<div data-role="fieldcontain">
+<fieldset data-role="controlgroup">
+	<legend>Date of Birth:</legend>
+
+    <label for="select-choice-month">Month</label>
+<select name="select-choice-month" id="select-choice-month">
+	<option>Month</option>
+	<option value="jan">January</option>
+	<!-- etc. -->
+</select>
+
+	<label for="select-choice-day">Day</label>
+<select name="select-choice-day" id="select-choice-day">
+	<option>Day</option>
+	<option value="1">1</option>
+	<!-- etc. -->
+</select>
+
+<label for="select-choice-year">Year</label>
+<select name="select-choice-year" id="select-choice-year">
+	<option>Year</option>
+	<option value="2011">2011</option>
+	<!-- etc. -->
+</select>
+</fieldset>
+</div>
+
+ +
+
+ Date of Birth: + + + + + + + + + +
+ +
+ +

Horizontally grouped select inputs

+

Select inputs can also be used for grouped sets with more than one related selections. To make a horizontal button set, add the data-type="horizontal" to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option’s value. Note that browsers without support for display: inline-block; will group the selects vertically, as above.

+ + +<fieldset data-role="controlgroup" data-type="horizontal"> + + +
+
+ Date of Birth: + + + + + + + + + +
+ +
+

Using custom menus

the framework builds a custom menu based on the select element's list of options. We recommend using a custom menu when multiple selections are required, as , or when the menu itself must be styled with CSS.