Fieldcontain: Allow using legends in addition to labels

Fixes gh-7453 Closes gh-8169
jquery-archive · Jul 4, 2016 · 65d96cb · 65d96cb
1 parent c1eb8c0
commit 65d96cb
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/css/structure/jquery.mobile.forms.fieldcontain.css b/css/structure/jquery.mobile.forms.fieldcontain.css
@@ -7,6 +7,7 @@
 	padding: .8em 0;
 }
 .ui-field-contain > label ~ [class*="ui-"],
+.ui-field-contain > legend ~ [class*="ui-"]
 .ui-field-contain .ui-controlgroup-controls {
 	margin: 0;
 }
@@ -29,28 +30,48 @@
 		clear: both;
 	}
 	.ui-field-contain > label,
+	.ui-field-contain > legend,
 	.ui-field-contain .ui-controlgroup-label,
 	.ui-field-contain > .ui-rangeslider > label {
 		float: left;
 		width: 20%;
 		margin: .5em 2% 0 0;
 	}
+
+	.ui-field-contain > legend {
+		padding: 0;
+	}
+
+	.ui-field-contain > label.ui-button {
+		width: auto;
+		float: none;
+		margin: .5em 0;
+	}
+
 	.ui-popup .ui-field-contain > label,
+	.ui-popup .ui-field-contain > legend,
 	.ui-popup .ui-field-contain .ui-controlgroup-label,
 	.ui-popup .ui-field-contain > .ui-rangeslider > label {
 		float: none;
 		width: auto;
 		margin: 0 0 .4em;
 	}
 	.ui-field-contain > label ~ [class*="ui-"],
+	.ui-field-contain > legend ~ [class*="ui-"],
 	.ui-field-contain .ui-controlgroup-controls {
 		float: left;
 		width: 78%;
 		-webkit-box-sizing: border-box;
 		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 	}
+
+	.ui-field-contain > legend ~ [class*="ui-"] {
+		margin: 0;
+	}
+
 	.ui-popup .ui-field-contain > label ~ [class*="ui-"],
+	.ui-popup .ui-field-contain > legend ~ [class*="ui-"],
 	.ui-popup .ui-field-contain .ui-controlgroup-controls {
 		float: none;
 		width: 100%;

diff --git a/demos/forms-field-contain/index.php b/demos/forms-field-contain/index.php
@@ -53,6 +53,27 @@
 				</div>
 			</div><!--/demo-html -->
 
+			<div data-demo-html="true">
+				<div class="ui-field-contain">
+					<label for="checkbox-a">Checkbox:</label>
+					<input type="checkbox" name="checkbox-a" id="checkbox-a">
+				</div>
+			</div><!--/demo-html -->
+
+			<div data-demo-html="true">
+				<div class="ui-field-contain">
+					<legend>Checkbox legend:</legend>
+					<label for="checkbox-b">Checkbox with legend:</label>
+					<input type="checkbox" name="checkbox-b" id="checkbox-b">
+				</div>
+			</div><!--/demo-html -->
+
+			<div data-demo-html="true">
+				<div class="ui-field-contain">
+					<button>Button</button>
+				</div>
+			</div><!--/demo-html -->
+
 			<div data-demo-html="true">
 				<div class="ui-field-contain">
 					<label for="select-native-1">Native select:</label>