I'd like to know if it's possible to make a form line with jQuerymobile like this prototype bellow.

I tried to use a layout grid with four columns, like the one bellow, but the Birthday label is bigger than the second column and increases it size.
<div class="ui-block-a">
<label for="idnumber" style="width:50%">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b">
<label for="month" style="width:10%">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:10%">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:30%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>

After some minutes I posted the question I realized what was the problem. By mistake I put the style="width:XX%" inside the labels on the first two fields, instead of putting them inside the block div.
The correct code is the following:
<div class="ui-block-a" style="width:40%; margin-right: 10px;">
<label for="idnumber">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b" style="width:15%; margin-right: 5px;">
<label for="month">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:15%; margin-right: 5px;">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:20%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>
And the correct result is the following:

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With