File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Problems with SELECT width Big Moose Saloon
  Search | Java FAQ | Recent Topics
Register / Login


Win a copy of Practical Unit Testing with TestNG and Mockito this week in the Testing forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Reply Bookmark "Problems with SELECT width" Watch "Problems with SELECT width" New topic
Author

Problems with SELECT width

Gregg Bolinger
Sheriff

Joined: Jul 11, 2001
Posts: 15040

I have set my SELECT dopdown to a max width of 10. I have also set a style of
overflow:scroll;
On Firefox, when I drop the list down it doesn't scroll, but it does make the width of the dropdown the size of the largest entry. This is OK.
But in IE, it doesn't even do that. The dropdown stays the same width of 10 and so I can't read all the entries. What else can I do?
Thanks.


My Blog | DZone Articles
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15003
You do not set a width on the box to begin with and it will go to the widest one...
there is not hort. scroll on a select element unless it is a done with layers and javascript...
Now I know you and you like to say well I need to make it be a minimum....
Then you are going to have to play with the values that are enterd and say if any of the options are not over X chars lon then set min width to X.
Eric
Gregg Bolinger
Sheriff

Joined: Jul 11, 2001
Posts: 15040

You do not set a width on the box to begin with and it will go to the widest one...
But this is not what I want. I want the select box to be a set width. But when I drop the list down, I want to be able to see all the text. In Firefox, as long as I set the overflow:scroll style, I get a good enough result. But in IE I don't.
http://gregg.embeddedthought.com/droptest.html
If you run that in Mozilla/Firefox and then run it in IE, you will see what I mean.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15003
What I was trying to say that did no come out is it will not show up the way you want it to in IE and Opera but will do what you want in Mozilla browsers....
Only way around it for those two is not to set a width or JS
Eric
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 411
Look at
http://www.devsoftware.com/dhtmlTest/select.html
The intention for this page was different - I wanted select which supports a tree and drag-and-drop, but you could use the idea and most of the code.
Gregg Bolinger
Sheriff

Joined: Jul 11, 2001
Posts: 15040

Originally posted by Eric Pascarello:
What I was trying to say that did no come out is it will not show up the way you want it to in IE and Opera but will do what you want in Mozilla browsers....
Only way around it for those two is not to set a width or JS
Eric

That sucks. Thank Eric. However, this statement;
Only way around it for those two is not to set a width or JS
is not true because not setting the width does not do what I want it to do.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15003
What people have done in the past is they detected the browser and if it was they increased the size of it so it showed the values fully when focused...

It is a mess.....
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 411
Well, if select does not fit, don't use it.
Use DIV and replicate the select behavior.
Select is inconvinient - for example, if you have a popup div, you have to wrap it into iframe in order to show up on top of select and you cant collapse optgroup, it does not supports drug-and-drop - you can continue the list if you want.
If anybody have time - could you write kind of select replacement using DIV?
You can use example from my site for a start.
 
 
subject: Problems with SELECT width
 
Threads others viewed
Problems with select box width
multiple select - cross browser problems
IE7 and wierd scroll bar problem
Adjusting size of select Box in java script
Dynamic tabIndex
MyEclipse, The Clear Choice