0

I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size?

It does it in FF but no currently in IE.

Thanks in advance, B

scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • You'll need JS for this. You can do this with a little help of jQuery. See also [this answer](http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie/2516571#2516571). – BalusC Sep 28 '10 at 23:06

3 Answers3

0

you can set the width with css using width: 125px.

Not sure if you can control the width of the popup part, but this will normally automatically resize, up to some arbitary limit.

Rik Heywood
  • 13,816
  • 9
  • 61
  • 81
0

To achieve the effect you are after, I think you'd need to use either some CSS 3 properties (which won't work in all browsers) or more likely some Javascript.

You could use the onFocus and onBlur events of the select box, and then update the style.width property accordingly. Let me know if you'd like some code samples!

philwilks
  • 669
  • 5
  • 16
  • hi philwilks. thanks for your reply, i would be interested in the CSS 3 as JS wont work because of the way the drop down box is created. Thanks, B. –  Aug 10 '09 at 11:01
0

Here's a quick jQuery solution that will resize the select box for you on mousedown - then change it back once something is selected or you click away.

var example = $('#some-id');

$(example).mousedown(function() {
        $(this).css('width','400px');                            
});
$(example).blur(function({
        $(this).css('width','200px');                            
});
$(example).change(function() {
        $(this).css('width','200px');                            
});
Tim - PlattForm Advertising
  • 21
  • 2