Sometimes while working on the Dropdown widget, you might have noticed that when enough bottom space is not available in order to display options, then dropdown options display on the top the widget. This is happening because there is not enough space on the screen below the dropdown to display all the options. And this is the default behavior of the HTML Dropdown List.
In this case, we have some requirement to display options in bottom only. And this can be achieved by usage of CSS.
{
bottom: auto !important;
margin-bottom: var(--space-xs);
top: auto !important;
max-height: 150px;
}
Here max-height browser will show the options list when there is not enough space available. Also, if bottom and top are set with auto behavior so that it would work with default behavior if browser bottom space is available.
Hello Vikas,
I have checked your issue and it is not feasible with only CSS. For this, you should use the JS for the same. This JS will find out the space on top and bottom.
Please find out the below link for a better understanding.
https://stackoverflow.com/questions/32746598/bootstrap-dropdown-list-position-up-bottom-based-on-document-height
Feel free to write us back if you have any concerns or questions regarding this.
Thanks
Hello Ajay,
I have posted the solution which I tried and working fine. It is the post just for knowledge sharing.
Regards,
Vikas
Noted