Solved

Changing the width of a select box option item

Posted on 2004-04-28
14
277 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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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)

777 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