How to fix "virtualSelectInput" dropdown behaviour to works in downward direction

[andirey]

There is great selector "virtualSelectInput" in shinyWidgets package. The dropdown works correct in downward direction when I run code on Posit Workbench. However when the same code deployed on Posit Connect it start works in upward direction.

The ChatGPT explains it as Posit Connect imposes scrollable containers, viewports, or iframe boundaries that prevent JS from detecting true space.

The "virtual-select.js" library used under the hood by {shinyWidgets}, tries to auto-detect available space and "flips" the dropdown upward if it thinks there's not enough room below the input.

It suggest overrides position = "bottom" setting.

Any attempts to fix issues failed on my side.

I will be appreciated if someone help me fix it

Thanks!

[ehinman]

I am also having this issue. I only want the drop-down choices to show BELOW the input field, not above it. The input bar is about 2/3 down the page in my shiny app. If I scroll to where the virtualSelectInput is about halfway in my view, the choices appear ABOVE the virtualSelectInput bar. But if I scroll all the way to the bottom of the page, so that the virtualSelectInput is near the top of my view, the choices appear BELOW the virtualSelectInput bar. I ONLY want the drop down choices to appear BELOW the virtualSelectInput bar.

[ehinman]

Solution that worked for me from Stack Overflow:
tags$style(HTML(".vscomp-dropbox-container {bottom: 100% !important;}")),