注文入力フォームは、データベースで定義されたフィールドから作成されます。すべてのフィールドには、テキスト キャプションと入力要素が含まれています。
input 要素は input type=text、checkbox または select 要素です。右側にドロップダウンボタンを含むjquery ui autocompleteまたはdatepickerにすることもできます。JQuery UI を使用しています。
出力では、入力要素が整列されていません。乱雑に見えます:
このレイアウトの読みやすさを改善するにはどうすればよいですか?
入力要素の左側を垂直方向に揃えて、同じ列から開始する方法は? ブラウザー ウィンドウのサイズが変更された場合、新しい列が自動的に表示または削除されます。
これを可能にする魔法の css または jquery ui 機能があるのではないでしょうか? また、すべてのフィールド幅を同じにすることもできます。各入力要素の最小幅はデータベースで定義されています。レンダリングされる幅は多少大きくなります。キャプションの場合、2 パス レンダリングを行うことができます。最初のパスでは、キャプションの最大文字数を見つけ、すべてのキャプションの幅を計算します。
使用されるhtmlは次のとおりです。
<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>