Options in select Box

sandeepsinghal · Oct 21, 2006

I have a select (drop down) in my webpage which has got options of
varying length. Some of them very long. I want to fix the width of
select dropw down so that it appears consistent with other elements on
my page (input boxes , other select boxes)
The problem is that since the option length is big, they are not
visible on the screen. This happens only for IE. Firefox nicely expands
the option length and shows the entire option and keeping the select
box width constant at the same time.
Is there any way I can do this in Internet Explorer.

Here is a sample code :

<html>

<head>
<title>Select Box Width</title>
</head>

<body>

<h3>Drop down with onhover</h3>
<select id="id1" name="name1" style="width:60px;">
<option value="1">AAAAAAAAA</option>
<option value="2">BBBBBBBBBBBBBB</option>
<option value="3">CC</option>
<option value="4">DDDDDDDDDDDDDDDD</option>
<option value="5">EEEEE</option>
</select>
<br/>

</body>

</html>

John · Oct 23, 2006

Hi

If you added size=5 then you would display all of them, and the largest
(DDD) would determine the width.
Is that what you are looking for?

<select id="id1" name="name1" style="width:60px;">
<option value="1">AAAAAAAAA</option>
<option value="2">BBBBBBBBBBBBBB</option>
<option value="3">CC</option>
<option value="4">DDDDDDDDDDDDDDDD</option>
<option value="5">EEEEE</option>
</select>

Regards
John

Jonathan N. Little · Oct 23, 2006

John said:
Hi

If you added size=5 then you would display all of them, and the largest
(DDD) would determine the width.
Is that what you are looking for?
<select "size="5" etc>

No, wrong. Size for the SELECT element determines the number of *rows*
displayed and not the number of *characters* as with text inputs...

John · Oct 23, 2006

"> No, wrong. Size for the SELECT element determines the number of *rows*

displayed and not the number of *characters* as with text inputs...

Yes, I agree, but when you display all the rows (5 in this case) the row
with the maximum number of characters will determine the width of the drop
down menu.
Or, alternatively, he could wrap the select in a table <td width="12%">. I
say table knowing that this is deprecated in preference to CSS and div's.
But same idea.

Thanks and regards
John

Jonathan N. Little · Oct 23, 2006

John said:
"> No, wrong. Size for the SELECT element determines the number of *rows*

Yes, I agree, but when you display all the rows (5 in this case) the row
with the maximum number of characters will determine the width of the drop
down menu.

But this does not address what the OP asked. The question was how to
specify the *width* of the SELECT element not the number of *rows*

To the OP the problem is that you cannot specify a different width for
the SELECT and OPTION elements. In IE, the width of the SELECT
constrains the OPTION elements within so

<style type="text/stylesheet">
SELECT { width: 60px; }
OPTION { width: auto; }
</style>

Will 'work' in Firefox, but in IE the OPTION list will not expand but
will also be 60px wide. My advice, adjust you layout so a variable width
SELECT will look acceptable and not try to constrain it.

Or, alternatively, he could wrap the select in a table <td width="12%">. I
say table knowing that this is deprecated in preference to CSS and div's.
But same idea.

Sorry, but what the hell will that do? The TD will not constrain the
OPTION list, just the opposite the TD's default behavior is to expand to
accommodate the contents.

sandeepsinghal · Oct 30, 2006

Jonathan said:
John wrote:
Will 'work' in Firefox, but in IE the OPTION list will not expand but
will also be 60px wide. My advice, adjust you layout so a variable width
SELECT will look acceptable and not try to constrain it.
Take care,

Jonathan

This is what I will have to I guess. Another alternative that I thought
was to try and constrain my data. Thanks for your responses.

Cheers,

Sandeep

Multi select options in a menu	1	Oct 30, 2022
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Dependent Drop Downs	1	Nov 4, 2023
How do I get the if statement correct in the lines that has it in the program?	2	Mar 16, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

Options in select Box

sandeepsinghal

John

Jonathan N. Little

John

Jonathan N. Little

sandeepsinghal

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads