Dynamic SELECT drop down does not resize

[TheDust]

I have a SELECT dropdown that is being updated dynamically through Javascript. However, the width of the dropdown never changes. It is always the width that it starts out as. If I initialize the dropdown with one option that is 25 characters long, the dropdown will stay 25 characters long and if I initialize it with no options at all then it just remains a tiny little dropdown with almost no width at all. There is no CSS that is fixing the width of this. In fact, I've taken all of the CSS out and I'm still getting the same result. I'm getting this in Mozilla.

Any thoughts? This just seems ludicrous... the dropdowns work fine when populated through PHP but with Javascript the browser doesn't seem to know how to resize the dropdown appropriately.

 

[cLFlaVA]

With JavaScript, you are not re-generating the page. The page has already been drawn by the browser, therefore the size has been set. You'll need to consider setting widths with CSS and JavaScript combined, based on the size of your largest option value.



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[TheDust]

Interesting. Have you seen an example of how this is done and what the browser support for it is?

 

[Rieekan]

Something like:

document.getElementById('selectboxID').style.width = '25em';

Where selectboxID is the ID of the select box you're changing.

- George

 

[TheDust]

I know how to change the width of the select box, but I'm not sure how you can resize automatically to fit the width of the widest option. Is there a way to get the width of an option tag?

 

[TheDust]

I figured this out... and the only way was to have the javascript rewrite the entire SELECT box on refresh. Not too big of a hassle really. But if you place the SELECT inside of a DIV, you can just rewrite the contents of the DIV's innerHTML property. When you rewrite the entire dropdown, it will adjust itself appropriately. Thanks for leading me to the right solution, guys!