如何让shinywidgets中的dropdownButton始终保持在顶部？

Question

在我闪亮的应用程序中，我有一个左上角带有下拉菜单的框。但是，我的框中的某些元素被下拉菜单切断（例如，在下图中，我的框中的表格被菜单覆盖）。有没有办法让菜单始终位于我框中其他元素的上方？

这是我的代码。我注意到只有当我使用 rhandsontable 渲染表格时才会出现此问题。不幸的是，我确实需要使用rhandsontable。

library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(rhandsontable)

factorUI <- function(id) {
  ns <- NS(id)
  box(
    width=6,
    title = "Charts",
    closable = TRUE,
    status = "danger",
    solidHeader = TRUE,
    collapsible = TRUE,
    dropdown(
      style = "material-circle", 
      selectInput(ns("options"),"Select an option:",
                  choices = list("All" = "all", "Option1" = "option1","Option2" = "option2"),selected = "all"),
      conditionalPanel("input.options == 'option1'",ns=ns, sliderInput(ns("shr.month"),"No of months:",min=0,max=1,value=c(0,1),step = 1)),
      conditionalPanel("input.options == 'option2'",ns=ns, sliderInput(ns("fh.month"),"No of months:",min=0,max=1,value=c(0,1),step = 1)),
      conditionalPanel("input.manual == 'Y'",fileInput(ns("upload"),"Upload new pattern",accept = ".csv")),
      materialSwitch(inputId = ns("factorind"),label = "Apply factor",status = "primary",right = TRUE),
      conditionalPanel("input.factorind == true",ns=ns,
                       numericInput(ns("start"),"Apply from:",value = NULL,min=0,step=1),
                       numericInput(ns("factor"),"Factor:",value=NULL,min=0)),
      id = ns("sidebar"),
      status = "danger",
      size = "sm",
      icon = shiny::icon("sliders")),
    rHandsontableOutput(ns("table")),
  )
}  

factor <- function(id) {(
  moduleServer(
    id,
    function(input,output,session) {
      output$table <- renderRHandsontable({
        rhandsontable(iris)
      })
    }
  )  
)}    

ui <- fluidPage(

    titlePanel("Example"),
    sidebarLayout(
        sidebarPanel(),
        mainPanel(factorUI("test"))
    )
)

server <- function(input, output) {
   factor("test")
}

shinyApp(ui = ui, server = server)

Answer 1

增加下拉列表的

z-index

，可以在

box

末尾添加样式，如下所示：

    box(
        ...,
        tags$style('.sw-dropdown-content {z-index: 105;}')
    )

CSS

z-index

决定元素的层顺序，哪个在上哪个在下。该表的索引为 102，因此如果您为下拉列表设置的数字大于该数字（shinyWidgets 下拉列表默认为 5），您的下拉列表将位于顶部。