Question

这似乎是一个非常简单的问题，但是我已经搜索了！

我正在使用selectize从selectInput下拉菜单的列表中选择多个项目。在它下面，我有一个“提交”按钮来对列表执行一些操作。当您添加多个条目时，selectInput框会增大，并且按钮会动态地向下移动到侧边栏，但是当您打开下拉菜单以查看选项列表时，Submit按钮将被隐藏。我希望按钮在打开下拉菜单时可以动态跳下来并保持可见状态，相反，在关闭下拉菜单时可以跳回顶部。

我不能一辈子...

我知道如何使用CSS更改下拉菜单的默认大小 .selectize-dropdown-content {max-height：...}，并且我可以添加一个空格以使“提交”按钮始终可见，但是一旦选择完项目，那将浪费空间。

附带示例代码

library(shiny)
library(shinydashboard)

# long entries that will increase number of lines in the selectInput box
nonsenseWords <-  c(replicate(25,paste0(sample(letters, 10, replace=TRUE),collapse="")))

ui <-
  dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
      fluidRow(style = "margin: 1%",
        selectInput("tall_list", 
                    "Stop covering my buttons!", 
                    nonsenseWords,
                    multiple = TRUE,
                    selected=nonsenseWords[c(1,5,7,11,20)]
                   )
        # The line below puts static space between the dropdown and the submit button -- this is what I want to remove
        # ,tags$div(style = "height: 16em;")
      )
     ,fluidRow(style = "margin: 1%",
         actionButton("submit", "Submit")
      )
    ),
    dashboardBody(
      dataTableOutput("choice")
    )
  )

server <- function(input, output, session) {
  output$choice <- renderDataTable({
    req(input$submit)
    return(data.frame("Chosen Words" = c(input$tall_list)))
  })
}

shinyApp(ui, server)

Answer 1

使用此CSS：

dashboardBody(
  tags$head(
    tags$style(".selectize-dropdown {position: static}")
  ),
  dataTableOutput("choice")
)

在“闪亮”中，请避免selectInput下拉菜单与其下方的操作按钮重叠

1 个答案: