I posted a similar question about this in the CSS forum because I was trying to find a css workaround for IE not supporting min-width but it looks like i'm going to have to use Javascript to do this.
I want to be able to dynamically resize the width of a select box. The select box has options added and removed dynamically already... I want the width of the select box to resize based on the width of the widest option inside it. Ex. When a really long option gets added, the select box should resize really wide to be able to show the entire option text. When a really long option gets deleted, the select box should resize back down to the width of the new widest text.
I am wondering if there is a way to do this through the DOM. I've been playing around with it and cant quite figure it out. I'll post my code from an example i was playing with. My idea was maybe checking the offsetWidth of the option elements or something like that and setting the selectbox width based on the width of the option elements.. However the option elements are showing as having zero width.
Also, dont think this will throw any kinks in it, but I want the select box to have a minimum-width it never resizes below, say 250px for example...
If this isnt the right way to go about it, any other ideas will be much appreciated too.
<html>
<head>
<link rel="stylesheet" type="text/css" href="kevin.css" title="Default">
<script>
// this was coming up as Zero
function getLongestOptionWidth() {
var selectElement = document.getElementById('1');
alert("Element 1 width = " + selectElement.offsetWidth);
selectElement = document.getElementById('2');
alert("Element 2 width = " + selectElement.clientWidth);
selectElement = document.getElementById('3');
alert("Element 3 width = " + selectElement.clientWidth);
selectElement = document.getElementById('4');
alert("Element 4 width = " + selectElement.clientWidth);
}
function addItem() {
var myoptions = document.getElementById('testid').options;
myoptions[myoptions.length] = new Option("This is a really really really asdfasdfasdfadsfdsafasdf really really long option text");
}
function deleteItem() {
var myoptions = document.getElementById('testid').options;
myoptions[myoptions.length-1] = null;
}
</script>
</head>
<body>
<div>
<select id="testid" multiple="true" size="10" style="overflow: scroll;" tabindex="18">
<OPTION id="1" VALUE="7382">steam turbine</OPTION>
<OPTION id="2" VALUE="2928">resistor array</OPTION>
<OPTION id="3" VALUE="3993">widget analyzer</OPTION>
<OPTION id="4" VALUE="9398">fiber identifier</OPTION>
</select>
</div>
<input type="submit" value="Add" onClick="addItem();">
<input type="submit" value="Delete" onClick="deleteItem();">
<input type="submit" value="GetLength" onClick="getLongestOptionWidth();">
</body>
</html>
I want to be able to dynamically resize the width of a select box. The select box has options added and removed dynamically already... I want the width of the select box to resize based on the width of the widest option inside it. Ex. When a really long option gets added, the select box should resize really wide to be able to show the entire option text. When a really long option gets deleted, the select box should resize back down to the width of the new widest text.
I am wondering if there is a way to do this through the DOM. I've been playing around with it and cant quite figure it out. I'll post my code from an example i was playing with. My idea was maybe checking the offsetWidth of the option elements or something like that and setting the selectbox width based on the width of the option elements.. However the option elements are showing as having zero width.
Also, dont think this will throw any kinks in it, but I want the select box to have a minimum-width it never resizes below, say 250px for example...
If this isnt the right way to go about it, any other ideas will be much appreciated too.
<html>
<head>
<link rel="stylesheet" type="text/css" href="kevin.css" title="Default">
<script>
// this was coming up as Zero
function getLongestOptionWidth() {
var selectElement = document.getElementById('1');
alert("Element 1 width = " + selectElement.offsetWidth);
selectElement = document.getElementById('2');
alert("Element 2 width = " + selectElement.clientWidth);
selectElement = document.getElementById('3');
alert("Element 3 width = " + selectElement.clientWidth);
selectElement = document.getElementById('4');
alert("Element 4 width = " + selectElement.clientWidth);
}
function addItem() {
var myoptions = document.getElementById('testid').options;
myoptions[myoptions.length] = new Option("This is a really really really asdfasdfasdfadsfdsafasdf really really long option text");
}
function deleteItem() {
var myoptions = document.getElementById('testid').options;
myoptions[myoptions.length-1] = null;
}
</script>
</head>
<body>
<div>
<select id="testid" multiple="true" size="10" style="overflow: scroll;" tabindex="18">
<OPTION id="1" VALUE="7382">steam turbine</OPTION>
<OPTION id="2" VALUE="2928">resistor array</OPTION>
<OPTION id="3" VALUE="3993">widget analyzer</OPTION>
<OPTION id="4" VALUE="9398">fiber identifier</OPTION>
</select>
</div>
<input type="submit" value="Add" onClick="addItem();">
<input type="submit" value="Delete" onClick="deleteItem();">
<input type="submit" value="GetLength" onClick="getLongestOptionWidth();">
</body>
</html>
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
[small](He's back)[/small]
