Solved

Changing the width of a select box option item

Posted on 2004-04-28
14
279 Views
Last Modified: 2008-01-16
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>
0
Comment
Question by:saneSol
  • 3
  • 2
  • 2
  • +4
14 Comments
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 10936574
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.
0
 
LVL 32

Accepted Solution

by:
ldbkutty earned 500 total points
ID: 10936732
Hai,

The width of the <OPTION> cannot be made larger than the width of the <SELECT>....i guess that you need a solution because the OPTION values are much bigger...

In such case you can make Horizontal Bar of the <OPTION> lists.....Have a look at:

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20959453.html

Glad if it helps...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10944081
Take the width off of the select and it will size to the widest of the options.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 32

Expert Comment

by:ldbkutty
ID: 10965575
have you succeeded  !?
0
 

Expert Comment

by:chijingao
ID: 11169290
0
 
LVL 2

Expert Comment

by:Zeyadss
ID: 11265448
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!
0
 
LVL 2

Expert Comment

by:Zeyadss
ID: 11265453
Don't forget to add the height in it as well so it will both increase text width on your text.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11269514
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&
0
 
LVL 2

Expert Comment

by:Zeyadss
ID: 11273795
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...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 11310811
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>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11805859
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.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AJAX Wordpress Not Reading Variable 2 55
message Alert on an empty search 10 29
Accordion won't close correctly 5 12
How do I show a login page over the login page? 5 38
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question