css - 当鼠标移到侧边栏之外时，如何防止 Shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断？

Question

我在我的 R Shiny 仪表板侧边栏菜单中添加了一个shinywidgets::pickerInput。

当 pickerInput 打开，并且光标悬停在它上面时，我可以看到 pickerInput 中的所有 5 个选项，没有问题。但是，当光标移动到侧边栏菜单之外的任何位置时 - 无论是下方还是主体中，选项都会被切断，我只能看到前两个选项。

我知道它们被切断因为它们溢出到侧边栏菜单区域之外 - 但是在这种情况下不需要切断显示。

我可以改变这种行为吗？理想情况下，无论光标移动到何处，都不会切断任何选项。

或者，如果光标移到 pickerInput 之外，我会很高兴 pickerInput 能够“自动关闭”(但我也不知道该怎么做!)

更新 - 我尝试将 pickerOptions(size = 5) 添加到我的代码中，但尽管文档中说“菜单将显示给定数量的元素，即使下拉菜单被切断”，它不会阻止选项在鼠标移动时被切断。

更新 - 我的可重现示例!

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

# Helper function 
convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
    mi$attribs$class=NULL
  }
  mi
}


# Define UI
ui <- dashboardPage(
  dashboardHeader(title = "Demo"),
  dashboardSidebar(
    sidebarMenu(
      convertMenuItem(
        menuItem(text = "Option1", 
                 tabName = "opt1",
                 shinyWidgets::pickerInput(inputId = "picker",
                                           label = "Select:",
                                           choices = c("Pick 1", "Pick 2", "Pick 3", "Pick 4", "Pick 5", "Pick 6"),
                                           selected = c(""),
                                           multiple = TRUE,
                                           options = list(`actions-box` = TRUE, 
                                                          `dropdownAlignRight` = TRUE,
                                                          `dropupAuto` = TRUE))),
        tabName = "opt1-outer"),
      menuItem("Option2", tabName = "opt2"),
      menuItem("Option3", tabName = "opt3")
    )
  ),
  dashboardBody(
  )
)
# Define server logic
server <- function(input, output) {
  
}

# Run the application
shinyApp(ui = ui, server = server)

Answer 1

默认情况下，打开的下拉菜单具有 display: block;。您可以通过添加

将其更改为display:contents;

.open > .dropdown-menu {
    display: contents;
}

然后，当您将鼠标悬停时，所有选项仍然可见。

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

# Helper function 
convertMenuItem <- function(mi,tabName) {
    mi$children[[1]]$attribs['data-toggle']="tab"
    mi$children[[1]]$attribs['data-value'] = tabName
    if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
        mi$attribs$class=NULL
    }
    mi
}


# Define UI
ui <- dashboardPage(
    dashboardHeader(title = "Demo"),
    dashboardSidebar(
        sidebarMenu(
            convertMenuItem(
                menuItem(text = "Option1", 
                         tabName = "opt1",
                         shinyWidgets::pickerInput(inputId = "picker",
                                                   label = "Select:",
                                                   choices = c("Pick 1", "Pick 2", "Pick 3", "Pick 4", "Pick 5", "Pick 6"),
                                                   selected = c(""),
                                                   multiple = TRUE,
                                                   options = list(`actions-box` = TRUE, 
                                                                  `dropdownAlignRight` = TRUE,
                                                                  `dropupAuto` = TRUE))),
                tabName = "opt1-outer"),
            menuItem("Option2", tabName = "opt2"),
            menuItem("Option3", tabName = "opt3")
        )
    ),
    dashboardBody(
        tags$head(tags$style(HTML("
                                  .open > .dropdown-menu {
                                      display: contents;
                                  }
                                 ")))
    )
)
# Define server logic
server <- function(input, output) {
    
}

# Run the application
shinyApp(ui = ui, server = server)