添加溢出-y后，宽下拉菜单被剪裁：滚动到侧边栏

Question

I have a R Shiny application, but I believe my question requires a HTML/CSS (possibly jQuery?) solution in which I am not too familiar with. I produced two simple Shiny apps which exemplifies the issue I am currently facing.

https://sometesting.shinyapps.io/test/

https://sometesting.shinyapps.io/test_-_copy/

The first one does not contain the CSS property:

.sidebar {
  height: 95vh;
  width: 300px;
  position: fixed;
  overflow-y: scroll;
  }

While the 2nd link does contain the above CSS property. You can see in the 2nd link, the drop-down menu gets clipped.

I would like to avoid this clipping issue, and have the drop-down menu go over the sidebar and scrollbar. I've researched for many hours and found a few jQuery solutions, but due to my unfamiliarity with jQuery plus how drastically different the R Shiny-generated HTML syntax is to me, I am not able to solve this.

Thanks!

Edit

Thanks to moose for helping me solve this! Check out this thread: Rendering Shiny Selectize pull-down menu on top

Pretty much, I placed dropdownParent: "body" in my selectizeInput function as such:

selectizeInput("s1", h4("Select State:"), 
    options = list(dropdownParent = 'body'),
    choices = state.name)

You may need to adjust the width and height of your selectize-dropdown. Thanks moose!

Answer 1

The issue is with the selectize dropdown. If you made the html list visible, the overflow works as expected, but I'm assuming you need something more powerful than the default select list.

There's a similar issue solved here: https://github.com/selectize/selectize.js/issues/192

Even though it's overflow-x rather than y, the solution should be the same. Failing that, you can try Semantic UI's dropdown (or better yet, Fomantic UI)