Looking to achieve a specific behavior for a label and control:
- If the screen width is less than X, the label and control should be on different rows with the control expanding to full width.
- If the width is equal to or greater than X, the label and control should be in the same row with the control aligned right. Additionally, text and control should be vertically centered:
Code snippet (test the jsFiddle):
HTML:
<div class="container">
<div class="dispInlineLabel" >
<label for="rb_geschlecht-2a">Gender</label>
</div>
<div class="dispInline">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="rb_gender" id="rb_gender-2a" value="0">
<label for="rb_gender-2a">female</label>
<input type="radio" name="rb_gender" id="rb_gender-2b" value="1">
<label for="rb_gender-2b">male</label>
</fieldset>
</div>
<div class="clearFloats"></div>
<div class="dispInlineLabel" >
<label for="ti_dob">Date of Birth</label>
</div>
<div class="dispInline">
<input name="ti_dob" id="ti_dob" style="text-align: right" type="date" data-theme="d">
</div>
<div class="clearFloats"></div>
</div>
CSS:
.dispInline, .dispInlineLabel{
display: inline-block;
border-bottom-width:0;
}
.dispInlineLabel{
min-width: 120px;
}
.dispInline{
float:right;
}
.clearFloats{
clear:both;
}
While the layout appears as desired, facing issues:
- In the case where control is on a separate row, it does not expand fully.
- Alignment of text and control is not centered when on the same row.
Could someone provide guidance on resolving these issues?