Permalink
Browse files

Fieldcontain: Allow using legends in addition to labels

Fixes gh-7453
Closes gh-8169
  • Loading branch information...
arschmitz committed Jul 2, 2015
1 parent c1eb8c0 commit 65d96cb071b4e0e9af74b6a34ea8b1a28c53ea3e
Showing with 42 additions and 0 deletions.
  1. +21 −0 css/structure/jquery.mobile.forms.fieldcontain.css
  2. +21 −0 demos/forms-field-contain/index.php
@@ -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%;
@@ -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>

0 comments on commit 65d96cb

Please sign in to comment.