how can I make sure a dropdownlist's list is always dropped down rather than up

Question

I want to show dropdownlist always to down. (Is it posible?)

If bottom space is less then the height of dropdown list it's show list to up.

I want to show list always to down.

Thanks in advance

Answer 1

This can be achieved by adding the following attribute to your CSS class of your dropdown list:

.drop-down {
    top:100%; 
}

The same can be used to force the list to go upwards: bottom: 100%;

Here is a jsfiddle demo .

---

EDIT:

The standard HTML form Select Option ( <select><option> <option></select> ) can not be manipulated to expand into a certain direction. You'll have to write your own custom dropdown menu with JavaScript to implement this functionality.

After a quick browse I've noticed that others have struggled with the problem you're having. And apparently the following CSS code seems to fix it in some cases.

select { vertical-align: top; }

Answer 2

What you can do is set the attr size using jQuery like so

jsFiddle : https://jsfiddle.net/ou5n9u3y/

jQuery

$(function () {
    var dropdownOptions = $('.dropdown-selector').find('option').length;
    $('.dropdown-selector').attr('size', dropdownOptions);
});