Solved

Changing the width of a select box option item

Posted on 2004-04-28
14
275 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
 
LVL 32

Expert Comment

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

Expert Comment

by:chijingao
ID: 11169290
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now