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
combo.setSize(size_value_as_int);
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.