Options in select Box

Forum Moderators: open

Message Too Old, No Replies

Options in select Box

Need to resize the "option" width in a "select" element

sandeepsinghal

2:25 pm on Oct 21, 2006 (gmt 0)

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>

Thanks
Sandeep

Robin_reala

3:06 pm on Oct 21, 2006 (gmt 0)

Welcome to WebmasterWorld, sandeep!

Unfortunately I don’t believe there is a way to get exactly what your want in IE. If you've got the space you maybe could do something like:

select { width: 10em; }
select:active { width: 20em; }

As in resize the <select> element when it’s focussed. Of course, we’re abusing the :active pseudoclass here as IE doesn’t understand :focus, but seeing as we only want to do it for IE in the first place we can hide that code behind a conditional comment (or a CSS hack).

penders

10:06 pm on Oct 21, 2006 (gmt 0)

In FF, you can style the width of the OPTIONs as a separate entity to the SELECT element - in IE6 unfortunately you cannot. (So, you can make FF behave like IE6, but not the other way around!) In FF, you can set the TITLE attribute on the OPTIONs, and this will display as a popup tooltip (perhaps displaying the full text), but in IE6, the TITLE attribute on the OPTION tag does nothing visual.

Just a thought though... if the SELECT box isn't wide enough to display the full text of the OPTIONs, isn't that breaking the rules of useability just a tad?

penders

11:20 pm on Oct 21, 2006 (gmt 0)

Just to add... in IE6 you can style the background-color of OPTION elements, but that seems to be about it.

sandeepsinghal

3:12 pm on Oct 22, 2006 (gmt 0)

penders wrote :
>>Just a thought though... if the SELECT box isn't wide enough to >>display the full text of the OPTIONs, isn't that breaking the rules of >>useability just a tad?

In a way yes, for that I have added a "mouseover" event on the select element - which shows the entire text that is active (a tool tip like text). There are many select elements on my webpage and in that context it is important form me to have a symmetric layout.