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:\[code\]<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='http://stackoverflow.com/questions/14038518/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='http://stackoverflow.com/questions/14038518/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='http://stackoverflow.com/questions/14038518/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='http://stackoverflow.com/questions/14038518/10' > <option value=''></option> <option value='http://stackoverflow.com/questions/14038518/10'>10 days</option> </select></span></div><div class='form-field'><label class='form-label' for='Eimuuda'>No change</label><input type='hidden' value='http://stackoverflow.com/questions/14038518/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='http://stackoverflow.com/questions/14038518/0.00' style='width:100px' maxlength='0' /></div></form>\[/code\]