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

Posted 2023-03-24

【中文标题】添加溢出后宽下拉菜单被剪裁：滚动到侧边栏

【英文标题】：Wide Drop-down menu gets clipped after adding overflow-y: scroll to Sidebar

【发布时间】：2020-07-07 16:36:20

【问题描述】：

我有一个 R Shiny 应用程序，但我相信我的问题需要一个我不太熟悉的 html/CSS（可能是 jQuery？）解决方案。我制作了两个简单的 Shiny 应用程序，它们说明了我目前面临的问题。

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

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

第一个不包含 CSS 属性：

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

虽然第二个链接确实包含上述​​ CSS 属性。您可以在第二个链接中看到，下拉菜单被剪裁了。

我想避免这个剪裁问题，并让下拉菜单越过侧边栏和滚动条。我研究了好几个小时并找到了一些 jQuery 解决方案，但由于我不熟悉 jQuery 以及 R Shiny 生成的 HTML 语法对我来说有多么不同，我无法解决这个问题。

谢谢！

编辑

感谢 moose 帮我解决这个问题！看看这个线程： Rendering Shiny Selectize pull-down menu on top

差不多，我将 dropdownParent: "body" 放在我的 selectizeInput 函数中：

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

您可能需要调整选择下拉菜单的宽度和高度。谢谢驼鹿！

【参考方案1】：

问题在于选择下拉菜单。如果您使 html 列表可见，溢出将按预期工作，但我假设您需要比默认选择列表更强大的东西。

这里解决了一个类似的问题： https://github.com/selectize/selectize.js/issues/192

即使是overflow-x 而不是y，解决方案应该是一样的。如果做不到这一点，你可以试试 Semantic UI 的下拉菜单（或者更好的是，Fomantic UI）

【讨论】：

dropdownparent: "body" 解决方案有效！非常感谢！如果有人遇到此问题，请查看此线程。它告诉你在哪里放置 dropdownParent: "body" ***.com/questions/25267714/…