cssrshinyshinywidgets

Hide a button in the actionbox of a pickerInput when container is set to body


I have an app with multiple pickerInputs in the sidebar. All have the actionBox enabled. Using CSS (or another technique) I want to hide the "Select All" button only for the first pickerInput. The CSS code used in the following example hides the button for all pickers. As an additional requirement I have set the option container = "body".

library(shiny)
library(bslib)
library(shinyWidgets)

ui <- page_sidebar(
  title = "Hide Select-All Button",

  tags$head(
    tags$style(HTML("
      .bs-actionsbox .bs-select-all {
        display: none !important;
      }
    "))
  ),
  
  sidebar = sidebar(
    pickerInput(
      inputId = "picker1",
      label = "Select option(s) from picker 1:",
      choices = paste("Choice", 1:10),
      options = pickerOptions(
        container = "body",
        actionsBox = TRUE
      ),
      multiple = TRUE
    ),
    
    pickerInput(
      inputId = "picker2",
      label = "Select option(s) from picker 2:",
      choices = LETTERS[1:15],
      options = pickerOptions(
        container = "body",
        actionsBox = TRUE
      ),
      multiple = TRUE
    ),
    
    actionButton("submit", "Submit Selections")
  ),
  
  card(
    card_header("Selected Values"),
    card_body(
      h4("Selections from Picker 1:"),
      verbatimTextOutput("result1"),
      
      h4("Selections from Picker 2:"),
      verbatimTextOutput("result2")
    )
  )
)

server <- function(input, output, session) {
  output$result1 <- renderPrint({
    input$picker1
  })
  
  output$result2 <- renderPrint({
    input$picker2
  })
}

shinyApp(ui, server)

Solution

  • With JS: If the shown.bs.select / hidden.bs.select events on picker1 are fired, set display: none / display: inline-block on the select-all-box:

    library(shiny)
    library(bslib)
    library(shinyWidgets)
    
    ui <- page_sidebar(
      title = "Hide Select-All Button",
      
      tags$head(
        tags$script('
          $(document).ready(function() {
            $("#picker1").on("shown.bs.select", 
              function (e, clickedIndex, isSelected, previousValue) {  
                $(".bs-actionsbox .bs-select-all")
                  .css("display", "none");
            });
            $("#picker1").on("hidden.bs.select", 
              function (e, clickedIndex, isSelected, previousValue) {  
                $(".bs-actionsbox .bs-select-all")
                  .css("display", "inline-block");
            });
          });              
        ')
      ),
      
      sidebar = sidebar(
        pickerInput(
          inputId = "picker1",
          label = "Select option(s) from picker 1:",
          choices = paste("Choice", 1:10),
          options = pickerOptions(
            container = "body",
            actionsBox = TRUE
          ),
          multiple = TRUE
        ),
        
        pickerInput(
          inputId = "picker2",
          label = "Select option(s) from picker 2:",
          choices = LETTERS[1:15],
          options = pickerOptions(
            container = "body",
            actionsBox = TRUE
          ),
          multiple = TRUE
        ),
        
        actionButton("submit", "Submit Selections")
      ),
      
      card(
        card_header("Selected Values"),
        card_body(
          h4("Selections from Picker 1:"),
          verbatimTextOutput("result1"),
          
          h4("Selections from Picker 2:"),
          verbatimTextOutput("result2")
        )
      )
    )
    
    server <- function(input, output, session) {
      output$result1 <- renderPrint({
        input$picker1
      })
      
      output$result2 <- renderPrint({
        input$picker2
      })
    }
    
    shinyApp(ui, server)