dropdown box width adjustment

**rizlaa** · 07-24-2006, 03:52 PM

I have a dropdown box which i am restricting to a width of 100px with the style="width: 100px" tag.

I want the resulting drop down box displaying the list of selectable values to expand to the size of the largest value so that all the options available are fully displayed.

is this possible??

**InNeedofHelp** · 07-24-2006, 03:57 PM

As in, if something is more than 100px in width you want the box to expand width-wise, otherwise you want the box to be 100px in width?

**jscheuer1** · 07-24-2006, 04:43 PM

If you want the minimum width to be 100px use that:

Code:

style="min-width:100px;"

This only works in non-IE browsers (v7 possibly the exception).

In IE you need to use a javascript dependant expression. I don't think it is worth the trouble in this case as, you could just remove the width style altogether, then the drop down will assume the width of the widest item.

By the way, the inline style attribute is just that, it is not a 'tag'.

**rizlaa** · 07-25-2006, 09:40 AM

i want the displayed select list field to be fixed at 100px
when you click on the select list and expand the box displaying all available options, i want the drop down box to expand to the largest item size (whilst keeping the select list item itself fixed at 100px) so that the options text is not chopped at 100px

I don't mind the value being chopped once it has been selected
(limited space on the screen and need to fix the item size for display purposes).

**rizlaa** · 07-27-2006, 08:34 AM

any help much appreciated

**jscheuer1** · 07-27-2006, 07:58 PM

There is no way I can see to do this very well across browsers. For Opera 9, FF 1.5.0.4, and IE 6 all on the PC this is about as good as it gets. Unfortunately, it looks the worst in IE 6 - the most widely used browser:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@media all and (min-width: 0px){
  .os {
 position:relative;
 height:1.2em;
  }
.os select {
position:absolute;
right:0;
}
}
</style>
</head>
<body>
<div class="os" style="width:100px;overflow:hidden;border-right:1px solid gray;">
<select name="ed" dir="rtl">
<option dir="ltr" selected>[select]</option>
<option dir="ltr" value="">word g g fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">fffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
</select>
</div>
</body>
</html>

**psycho** · 10-31-2007, 10:12 AM

Hi John

I love your dropdown box solution! Really handy.

How do you make the dropdown arrow to be on the right hand side
and more importantly
how do you make all of the options left aligned?
When I changed ltr to rtl the dropdown arrow disappeared.

Thanks in advance.

Andy

**Bijeesh M** · 11-09-2007, 09:25 AM

Originally Posted by rizlaa

I have a dropdown box which i am restricting to a width of 100px with the style="width: 100px" tag.

I want the resulting drop down box displaying the list of selectable values to expand to the size of the largest value so that all the options available are fully displayed.

is this possible??

i want an urgent solution

**Bijeesh M** · 11-09-2007, 10:54 AM

I have a dropdown box which i am restricting to a width of 100px with the style="width: 100px" tag.

I want the resulting drop down box displaying the list of selectable values to expand to the size of the largest value so that all the options available are fully displayed.

is this possible??
I want a solution of this using javascript. Moreover if I select one option then do not change the length of selectbox.

**Siva Prasad Jammula** · 05-24-2011, 05:08 AM

Originally Posted by jscheuer1

There is no way I can see to do this very well across browsers. For Opera 9, FF 1.5.0.4, and IE 6 all on the PC this is about as good as it gets. Unfortunately, it looks the worst in IE 6 - the most widely used browser:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@media all and (min-width: 0px){
  .os {
 position:relative;
 height:1.2em;
  }
.os select {
position:absolute;
right:0;
}
}
</style>
</head>
<body>
<div class="os" style="width:100px;overflow:hidden;border-right:1px solid gray;">
<select name="ed" dir="rtl">
<option dir="ltr" selected>[select]</option>
<option dir="ltr" value="">word g g fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">fffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
<option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
</select>
</div>
</body>
</html>

Hi John

Really very good artical,helps a lot. But i have a small issue with this.

Could you please help me with the following question?

How do you make the dropdown arrow to be on the right hand side
and more importantly
how do you make all of the options left aligned?
When I changed ltr to rtl the dropdown arrow disappeared.
I want dropdown list should be scrollable

Request you please help and share the solution to my email..Please

Thanks in advance.

Siva.

Thread: dropdown box width adjustment

Thread Tools

Search Thread

dropdown box width adjustment

Left aligned options...

Bookmarks

Bookmarks

Posting Permissions