'selectize dropdown height base on screen height

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!

Solution 1:^[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;
}

Solution 2:^[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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	melvnberd
Solution 2	Twisted Whisper

'selectize dropdown height base on screen height

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]