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

irt.org | Knowledge Base | JavaScript | Form 1 | Q858 [ previous next ]

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

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.

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

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.