selectize dropdown height base on screen height

Question

Good Day!

I have a dropdown select using "selectize" plug-in. how can I set dropdown contents height base on screen height, since I have many items in my dropdown select, it would be nice to present them in a much longer list than just a short one..

currently what I have.

desired output

I tried using below code, just from playing on console but, it doesnt work as well.

.selectize-dropdown, .selectize-dropdown.form-control{
        height: -webkit-fill-available !important;
        height: -moz-available !important;
        height: fill-available !important;
}

.selectize-dropdown-content{
   /* height: -webkit-fill-available !important;
        height: -moz-available !important;
        height: fill-available !important;*/

}

any suggestions please, Thanks!

Fyke

Answer 1

I manage to attain the desired out put by

.selectize-dropdown, .selectize-dropdown.form-control{
    height: 90vh !important;
}

.selectize-dropdown-content{
    max-height: 100% !important;
    height: 100% !important;
}

Fyke

If the dropdown doesn't have that many options, this solution doesn't scale down and will introduce a lot of unnecessary white spaces. imgur.com/vu0lxOo – Wintry

Answer 2

.selectize-dropdown-content{
    max-height: 90vh !important;
}

This simple line of code will scale up/down nicely when options are added/removed from the select control.

Select with lots of options:

Select with few options:

Wintry