Dropdown box gets hidden by parent space constraint

[taitranvn]

When parent element does not provide enough height, the dropdown box gets hidden. In the screenshot, all combo boxes are inside a div element which has fixed height.

Better visual if the dropdown list is atop everything else so it is not constrained by parent element height. The expected should be:

[ivkremer]

Hi! I appreciate your comment very much. I think this can be solved with position: fixed for the dropdown. But in this case I don't know how to be when combobox is at the bottom of the page. I'll try to fix it anyhow, I agree it is much more convenient and predictable behavior.

[gjsjohnmurray]

For a combobox near the bottom of the page I've successfully used the following technique to make it appear above the field rather than below. I also limit the height so it doesn't extend beyond the window boundary:

$('#myElement .scombobox-list').css('bottom', $('#myElement').css('height')); $('#myElement .scombobox-list').css('maxHeight', $('#myElement').offset().top);

It'd be a nice enhancement for the control to do this automatically, choosing above or below based on which side has more space. It's a bit odd to click the down-arrow image and see the list appear above, then click the up-arrow image to make it disappear downwards, but I think that's also what we see with a regular dropdown, at least on some platforms.