Solved

Changing the width of a select box option item

Posted on 2004-04-28
14
278 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

791 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