0

I wanted to inquire about possible solution(s) for the following issues encountered when using shinyWidgets::pickerInput in combination with semantic.dashboard:

  • visual output in UI, created using pickerInput, is not a dropdown menu
  • when clicking on the visual output the entire list of options (passed as input to pickerInput ) shows up in UI, and cannot be closed

See two snapshots: first is a snapshot of UI as Shiny app starts, and then a second snapshot when clicking on the box containing the value to select

Here is the code used to create this dashboard

    if(interactive()){
  
  ui <- semantic.dashboard::dashboardPage(
    
    header = semantic.dashboard::dashboardHeader(
      color = "blue", 
      title = "Dashboard Test", 
      inverted = TRUE
    ),
    
    sidebar = semantic.dashboard::dashboardSidebar(
      size = "thin", 
      color = "teal",
      semantic.dashboard::sidebarMenu(
        semantic.dashboard::menuItem(
          tabName = "tabID_main", 
          "Main Tab"),
        semantic.dashboard:: menuItem(
          tabName = "tabID_extra", 
          "Extra Tab")
      )
    ),
    
    body = semantic.dashboard::dashboardBody(
      semantic.dashboard::tabItems(
        
        selected = 1,
        
        semantic.dashboard::tabItem(
          tabName = "tabID_main",
          semantic.dashboard::box(
            shiny::h1("Main body"), 
            title = "A b c", 
            width = 16, 
            color = "orange",
            
            shinyWidgets::pickerInput(
              inputId = "ID_One",
              choices = c("Value One","Value Two","Value Three"),
              label = shiny::h5("Value to select"),
              selected = "Value Two",
              width = "fit",
              inline = TRUE),
            
            shiny::verbatimTextOutput(outputId = "res_One")
          )
        ),
        
        semantic.dashboard::tabItem(
          tabName = "tabID_extra",
          shiny::h1("extra")
        )
        
      )
    )
  )
  
  server <- function(input, output, session) {
    output$res_One <- shiny::renderPrint(input$ID_One)
  }
  
  shiny::shinyApp(ui, server)
  
}

I am using

  • R version 3.6.3 64-bit on Windows computer
  • R packages as of checkpoint date 2021-05-15
  • shinyWidget version 0.6.0
  • semantic.dashboard version 0.2.0
Aex
  • 131
  • 1
  • 11

1 Answers1

0

Solution was given on semantic.dashboard Github page by Osenan.

I would like to acknowledge it, and to include it here for convenience.

Essentially the reason for the problem is the clash between Bootstarp and Semantic (Fomantic) UI.

semantic.dashboard uses shiny.semantic components, which in turn suppress Boostrap css and js libraries. Since shinyWidgets::pickerInput needs Boostrap to work, a solution is to load manually js and css Boostrap libraries.

This code can be added right below semantic.dashboard::dashboardBody as follows:

body = semantic.dashboard::dashboardBody(
tags$head(
  tags$link(rel = "stylesheet", type = "text/css", id = "bootstrapCSS",
            href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"),
  tags$script(src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js")
),
Aex
  • 131
  • 1
  • 11