Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

One label with three inputs with jQuery Mobile

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

enter image description here

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">
        &nbsp;
    </label>
    <input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:30%">
    <label for="year">
        &nbsp;
    </label>
    <input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>

enter image description here

like image 620
javsmo Avatar asked Dec 06 '25 02:12

javsmo


1 Answers

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">
        &nbsp;
    </label>
    <input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:20%">
    <label for="year">
        &nbsp;
    </label>
    <input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>

And the correct result is the following:

enter image description here

like image 106
javsmo Avatar answered Dec 07 '25 17:12

javsmo