In Shiny, avoid overlap of selectInput dropdown with action button underneath it

问题

This seems like a very simple question, but I have searched and searched!

I am using selectize to select multiple items from a list in a selectInput dropdown menu. Below it I have a Submit button to perform some action on the list. As you add multiple entries, the selectInput box grows, and the button dynamically moves down the sidebar, but when you open the dropdown menu to see the list of options, the Submit button is hidden. I would like the button to dynamically jump down and stay visible when you open the dropdown, and conversely to jump back up when it closes.

I can't for the life of me...

I know how to change the default size of the dropdown with css .selectize-dropdown-content { max-height: ... }, and I can add a spacer to keep the Submit button always visible, but that's wasted space once you're done selecting items.

sample code attached

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)

回答1:

Use this CSS:

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

来源：https://stackoverflow.com/questions/54933677/in-shiny-avoid-overlap-of-selectinput-dropdown-with-action-button-underneath-it

标签

css

Shiny

shinydashboard

selectinput