asked on

Changing the width of a select box option item

Hi all,
I have a select box with long text in its options. the select box width is set to a size which is smaller then the text in the option boxes.
I'm trying to give the options a different width so it will display the long text when I open the select box. But the option recives the select box width and ignores its width.
Does any one have a sollution for this problem?

Here is my code:
<select id="id1" style="width:100px">
<option style="width:200px">Long long long text</option>
<option style="width:200px">Long long long text</option>
</select>

[ fanpages ]

Hi saneSol,

Have you tried using a definition by <style> tag?

e.g.

<style type="text/css">
select,option {
width: 200px;
font-family: Verdana, Arial, Serif;
font-size: 12pt;
color: #ff0000;
}
</style>

BFN,

fp.

ASKER CERTIFIED SOLUTION

ldbkutty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

Take the width off of the select and it will size to the widest of the options.

Cd&

ldbkutty

have you succeeded !?

chijingao

http://www.blooberry.com/indexdot/html/topics/selectwidth.htm

Zeyadss

Try this saneSol
-------------------------
<select id="id1" style="width:198; height:198">
<option style="width:200px"">Long long long text</option>
<option style="width:200px">Long long long text</option>
</select>
-------------------------
saneSol I FOUND YOUR SOLUTION TRY THIS!

Zeyadss

Don't forget to add the height in it as well so it will both increase text width on your text.

COBOLdinosaur

Zeyadss,

Sorry , but I can't think any way to describe that as anything but nonsense. It does not do a thing in IE and in Mozilla what is products is just plain defective. Try at least a little testing before you post that kind of stuff.

Cd&

Zeyadss

Why dont you calm down and add a little more nice things into your posts. I know your working in experts-exchange but atleast tell me that my post has already been found. and Yes I do test them and they actually work on mozilla and IE. Thank You for your comment! Nonense...

Michel Plungjan

It does nothing in IE6.
In Mozilla it works only when you remove the height
even works with the title attribute ;)

<select id="id1" style="width:200" onFocus="this.title=this.options[this.selectedIndex].text">
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
<option >Long long long textLong long long textLong long long textLong long long textLong long long text</option>
</select>

seanpowell

I would recommend accept http:#10936732.
The only way to achieve the effect of having the select box and options with a different width would be a custom dhtml solution.