Q858 How can I limit the width of a select form field?

You are here: irt.org | FAQ | JavaScript | Form | 1 | Q858 [ previous next ]

In Microsoft Internet Explorer 4+ this can be done using:

<script language="JavaScript"><!--
document.formName.selectName.style.pixelWidth = 100;
//--></script>

This level of control is not possible in Netscape Navigator. You can try one of several alternatives:

You can only increase the width by padding out an entry with multiple ' '.

You could have a dummy entry with '-------------' characters.

Or you can try:

<form>

<small>
<select>
<option>ABC123
<option>123ABC
</select>
</small>

<font size="-2">
<select>
<option>ABC123
<option>123ABC
</select>
</font>

<font size="+2">
<select>
<option>ABC123
<option>123ABC
</select>
</font>

<font size="+4">
<select>
<option>ABC123
<option>123ABC
</select>
</font>

</form>

Amos Bannister writes:

Although this was a reasonable answer, it was not technically correct when it stated that it is not possible to limit the width of a select box in Netscape.

To do this you must populate the select box using Javascript. You can specify a WIDTH attribute which will specify the width in pixels (although this is not such a good idea), or you can put one dummy <OPTION> entry which is the width you want. Then you delete the option using Javascript and add all the options you wish to appear in the list. The select box will be forced to stay the size of the original (dummy) entry.

Note: This will not work on Internet Explorer, so you would need to also include the STYLE specification in the SELECT tag for Internet Explorer.

©2018 Martin Webb