Hidden Combos don't display properly when unhidden

I have a whole lot of duplicated combos, some of which I hide using display:none. I use width:auto on the combos which works fine on the visible combos, but when I show one of the hidden combos the width is all wrong. I got around this by setting a width on the selects, but the option list still seems to be working on auto so it’s narrower than the select.

How can I fix this?

When “auto” specified as size of combo, it takes the size of parent , which is not working for hidden elements.

After switching combo back to visible state you can call
which will set specified size for all elements of combo.

Thinking about this more. There must be a better way of doing what I want. I have a form for entering recipes. There are 20 rows allowed for entering the ingredients. Each row has an input box for quantity and 3 combos (unit, ingredient, and 2 for preparation methods).

The dropdowns are populated from a db and are the same for every row. Sometimes the field will be populated as in edit mode and other times they will all be empty.

The 20 rows are taking a long time to render, so I was going to display either just those rows that are populated, or just a few rows and then allow the user to add another row dynamically by clicking on a link. I was using jquery for this.

I was hiding the other rows, but this takes just as long a the rows are still rendered.

Can you think of a better solution. Should I be using a grid instead? or is there a way to dynamically render the rows with a new name and id when the link is clicked. Currently I add the no 1-20 to the name of the combo.