Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Changing the width of a select box option item

Posted on 2004-04-28
14
Medium Priority
?
288 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 2000 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
Technology Partners: 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
 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

926 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