jQuery UI autocomplete(Combobox) button alignment
I have jQuery UI autocomplete combo boxes(http://jqueryui.com/autocomplete/#combobox) in a tabular form.
<tbody>
<tr>
<td><select id="someSelect"><option....></select></td>
<td>....</td>
<td>....</td>{*n}
</tr>
</tbody>
<script>
$('select#someSelect').combobox();
</script>
Each row gets several TD elements not more than 6 including the combo boxes.
The issue is that the button next to input field moves below to the input box when the window size changes by its content size dynamically.
After calling .combobox() on a select box:
<td>
<select name="select1" id="ma1" style="display: none;">
<option value="0">Select Attribute</option>
<option value="ContactFirstName">ContactFirstName</option>
</select>
<input class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<button type="button" tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-button-text"></span>
</button>
</td>
If I shrink the window horizontally, the button next to input field goes under the text box.
How can I force the button stick next to input box no matter what the window size is?
The way to do this is to force the container element (in this case, likely a tag) to always be wide enough to hold both the combobox and the button. So however wide that is going to be should be your min-width value for the container element. So if the combobox is 200px wide and the button is 100px wide (and this is for a second pretending that there's no margins involved) then the parent container should have min-width: 300px;
链接地址: http://www.djcxy.com/p/68596.html上一篇: 一个Combobox人口问题