Javascript, CSS: Want to resize a multiple select filter dynamically.

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)[0];

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.
renisenbbAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

renisenbbAuthor Commented:
I think the select element's size attribute refers to how many options to show at a time but the height is in terms of pixels. Is there a way to compare the 2?
0
sajayj2009Commented:
Do you have an online version?
0
renisenbbAuthor Commented:
No, i don't. I'm trying to correlate the select element's size attribute and the td element's auto height attribute.
When there is a lot of data, the td element keeps wrapping the text and so the cell keeps growing in height.
Currently i have fixed the select element's size but i was wondering if i could tie the size to the dynamic cell height.
The height is in pixels, but the size is an integer (no of options).
0
sajayj2009Commented:
I think you dont need to set height....tables will generally increase height upon content.
instead you can set a max-height: value in px; to select box to set maximum possible height of menu container in table.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.