Issue
Order entry form is created from fields defined in database. Every field contains text caption and input element.
input element is input type=text, checkbox or select element. If can be also jquery ui autocomplete or datepicker containing dropdown button in right side. JQuery UI is used.
In output input elements are not aligned. It looks messy:
How to improve readability of this layout?
How to align left sides of input elements vertically so that they start at same column ? if browser window is resized, new column should appear or removed automatically.
Maybe there is some magic css or jquery ui feature which allows this? Also it may be possible to make all field widths the same. Minimum width of each input element is defined in database. Rendered width can be somewhat bigger. For captions, it is possible to make two pass rendering: in first pass find maximum number of characters in caption and calclulate width for every caption.
html used is:
<form id='_form' class='form-fields'>
<div class='form-field'>
<label class='form-label' for='Klient0_nimi'><u>Customer</u></label>
<span id='span_Klient0_nimi'><input id='Klient0_nimi' name='Klient0_nimi' style='width:100px' class='ui-widget-content ui-corner-all' maxlength='80' lookup='Klient' value='Brad Abrams' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>
<div class='form-field'>
<label class='form-label' for='Tasudok'>Number</label>
<input class='ui-widget-content ui-corner-all' id='Tasudok' name='Tasudok' value='798' style='width:100px' maxlength='25' />
</div>
<div class='form-field'>
<label class='form-label' for='Kuupaev'>Date</label>
<input maxlength=10 size=10 class='ui-widget-content ui-corner-all' id='Kuupaev' name='Kuupaev' value='1/26/2012' />
</div>
<div class='form-field'>
<label class='form-label' for='Maksetin1_tingimus'><u >Condition</u></label>
<span><select id='Maksetin1_tingimus' name='Maksetin1_tingimus' class='ui-widget-content ui-corner-all' style='width:100px'
lookup='Maksetin' value='10' >
<option value=''></option>
<option value='10'>10 days</option>
</select>
</span>
</div>
<div class='form-field'>
<label class='form-label' for='Eimuuda'>No change</label>
<input type='hidden' value='false' name='Eimuuda' />
<input type='checkbox' id='Eimuuda' name='Eimuuda'/>
</div>
<div class='form-field'>
<label class='form-label' for='Doksumma'>Total</label><input style='text-align:right' id='Doksumma' name='Doksumma' disabled='disabled' class='jqgrid-readonlycolumn' readonly='readonly' tabindex='-1' value='0.00' style='width:100px' maxlength='0' />
</div>
</form>
Solution
You could use some column alignment: on the first columns the labels, on the second column the input fields.
Eventually you can use 4 column: labels on 1st and 3rd, input fields on 2nd and 3rd.
Also, use width:100% on input fields. And you may want to consider text-align:right for labels.
The old html table may help you here.
As you have many fields you may want to consider to split the form in sections; like using <fieldset> and <legend> as explained here
Example:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.lbl {
text-align: right;
width: 100px;
white-space: nowrap;
}
.fld {
width: 100%;
}
.frm {
display: inline-block;
}
</style>
</head>
<form>
<fieldset>
<legend>Person</legend>
<div class="frm">
<table>
<tr>
<td class="lbl"><label for="name">Name:</label></td>
<td><input class="fld" id="name" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="email">Email:</label></td>
<td><input class="fld" id="email" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="dob">Date of birth:</label></td>
<td><input class="fld" id="dob" type="text"></td>
</tr>
</table>
</div>
<div class="frm">
<table>
<tr>
<td class="lbl"><label for="addr">Address:</label></td>
<td><input class="fld" id="addr" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="city">City:</label></td>
<td><input class="fld" id="city" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="ctry">Country:</label></td>
<td><input class="fld" id="ctry" type="text"></td>
</tr>
</table>
</div>
</fieldset>
</form>
</body>
</html>
This would be the results:
when there is enough space horizontally:
when there is not enough space horizontally:
Answered By - Luigi R. Viggiano
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.