Get size of autosized control?

Question

I have a situation where I have several listbox controls on the same asp.net page. They are currently autosized to keep data from truncating. However, I would like to be able to determine the width of the largest listbox and then alter the size of the other listboxes to be the same.

The question is... How can I access the size of the listboxes? Or Can I?

Answer 1

Yes you can...

//This is a <div> that wraps around your listboxes
var wrapperDiv = document.getElementById('listboxWrapper');

//Get all <select> elements within the <div>
var sels = wrapperDiv.getElementsByTagName('SELECT');

//An array to store the width values
var widths = new Array();

//Load the array
for(var i = 0, l = sels.length; i < l; i++)
  widths[i] = sels[i].offsetWidth;

//Get the max width
var maxW = Math.max(widths);

//Set the max width to all the list boxes
for(var sel in sels)
  sels[sel].style.width = maxW;

Answer 2

for the best results, consider using a javascript framework, using jquery:

var width = 0;
//get the largest width
$("select").each(function() {
    if ($(this).width() > width) {
        width = $(this).width();
     }
});
//make them all the same width
$("select").css("width", width);