PDA

View Full Version : 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:


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:


<!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
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
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:


<!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.

Siva Prasad Jammula
05-24-2011, 05:14 AM
[QUOTE=Siva Prasad Jammula;253514]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 questions:

How do you make the dropdown arrow to be on the right hand side?
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

I am using IE6 browser

Thanks in advance.

Siva.