I have a table cell which displays some previously selected data. When a user clicks on it, a multi-select dropdown appears in the cell instead. Currently the dropdown has size="5". Sometimes, the table cell can be pretty long (y-axis) if there was a lot of data and it looks weird to have a relatively small multi-select dropdown and a lot of empty space below in the rest of the cell.
Is there a way to dynamically resize the dropdown to fit the cell? I can retrieve the cell height. But adding that height to the select element did not make a difference.
inputElement = $('<select id="mySelect" style="display:none;" height="'+currentHeight+'" size="5" multiple="multiple" ></select>').appendTo(element);
This works for the case when the cell had a lot of data : inputElement.style.height=currentHeight.
But it didn't work if the cell had no data because then the dropdown would just show 1 option.