Choices dropdown appears outside the viewport

Hi there!

I’m using Choices.js 7.0.0 in my project and there seems to be an issue with the dropdown positioning. Whenever the browser viewport’s height is low, I’d expect the dropdown to appear with the “top” position but it just opens to the bottom, as always, and gets hidden behind the browser viewport:

I use a very basic configuration:

searchEnabled: false, shouldSort: false, itemSelectText: '',

And that’s it. I’ve also removed my custom styling for choices.js for a moment but did not help.

Thanks!

[tinovyatkin]

It certainly doesn’t. But in this viewport size, the whole dropdown doesn’t fit neither top nor bottom part. So, we either need to implement some heuristic behavior to have a preference or leave it as is. What will be your suggestion? To calculate in which position the dropdown will have a higher visibility percentage? For small viewports (i.e. mobile) native browsers implements over-viewport UX we have no way to implement in a custom control.

[filip-jk]

I strongly believe that the case I uploaded the screenshot of is really “ugly”. We can clearly see there is more space to the bottom of the input and that’s where the dropdown should go so the “calculate in which position the dropdown will have a higher visibility percentage” is a great idea.

Another improvement is a new option that could be used to set a certain amount of “space” for the dropdown (either a fixed amount like 200px or a percentage of the dropdown height) and once there is less than that, the native browser select could be shown instead. It would be optional, of course.