Unexpected behavior with shinyDashboardPlus sidebar

[nklepeis]

Hi, Awesome package! I'm making a dashboard for showing different health topics using shinydashboardplus. I'm having an issue with different shinyglide screens not being hidden properly when the sidebar is closed.

See my attached code (R shiny app) and screenshots that illustrate the problem.

Thanks for any insights! --Neil

This one shows the problem when the sidebar is closed

This one is the expected behavior when the sidebar is open:

Shiny code here:

` #

This is a Shiny web application. You can run the application by clicking

the 'Run App' button above.

#

Find out more about building applications with Shiny here:

#

http://shiny.rstudio.com/

#

library(shiny) library(shinydashboard) library(dashboardthemes) library(shinydashboardPlus) library(shinyWidgets) library(shinyglide)

ui <- dashboardPagePlus(

sidebar_fullCollapse=TRUE,

dashboardHeaderPlus(

title = tagList(
  span(class = "logo-mini", icon("list")),
  "Explore Topics"
)

), dashboardSidebar(

tags$style(
  "#sidebarItemExpanded {
        overflow: auto;
        height: calc(100vh - 50px) !important;
    }"
),

sidebarMenu(
  menuItem("COVID-19", tabName = "covid", icon = icon("viruses")),
  menuItem("Wildfire Smoke", tabName = "wildfire", icon = icon("fire-smoke")),
  menuItem("Tobacco Smoke", tabName = "tobacco", icon = icon("smoking"))
 )

), dashboardBody(

#  Works in a real browser
#      can be thin or none
tags$head(
  tags$style(HTML("* {
                         scrollbar-width: thin;
                         }
                    .sidebar-menu > li > a {
                        padding-top: 6px;
                        padding-right: 5px;
                        padding-bottom: 6px;
                        padding-left: 15px;
                        display: block;
                    }
                   "
  )
  )
),

shinyDashboardThemes(
  theme = "grey_dark"
),

tabItems(

  tabItem(tabName="covid",

          h1("COVID-19"),

          glide(
            height = "100%",
            controls_position="top",
            screen(
              h2("Background"),
              h4("What is COVID-19?"),
              h4("How does it affect health?"),
              img(src='covid.jpg', align = "left",
                  width="400px")
            ),
            shinyglide::screen(
              h2("Questions"),
              flowLayout(
                box(title=span(icon("fingerprint", "fa-2x"),HTML(" "), "How Does COVID-19 Spread?"),
                    p("What are the ways in which COVID-19 can spread."),
                    width=NULL, status="info", solidHeader = TRUE),
                box(width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("exchange-alt", "fa-2x"),HTML(" "),"How do health measures affect transfer rates?"),
                    p("What is the population effect of distancing and masking?")),
                box(p("How many individual virus bodies are in a typical cough or sneeze?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("head-side-cough", "fa-2x"),HTML(" "),"How much virus does a cough produce?")),
                box(p("Which masks are effective at protecting the wearer or those around them?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("head-side-mask", "fa-2x"),HTML(" "),"Do Masks Help?")),
                box(p("How far from a person can the virus move?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("people-arrows", "fa-2x"),HTML(" "),"How far is far enough?")),
                box(p("What is the chance of getting sick from an infected partygoer?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("birthday-cake", "fa-2x"),HTML(" "),"How risky is having a party?")),
                box(p("How long does it take to air out a room?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("window-frame-open", "fa-2x"),HTML(" "),"Does it stick around?")),
                box(p("What is the dissipation rate outdoors?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("trees", "fa-2x"),"How much exposure can occur outdoors?"))

              )

            ),
            shinyglide::screen(
              h2("Measures"),
              flowLayout(
                box(title=span(icon("wave-sine", "fa-2x"),HTML(" "),
                               "Simulation"),
                    p("Perform simulation experiments of people and the environment."),
                    width=NULL, status="danger", solidHeader = TRUE),
                box(title=span(icon("gamepad-alt", "fa-2x"),HTML(" "),
                               "Role playing game"),
                    p("Program and play a virtual reality game to explore different scenarios."),
                    width=NULL,status="danger",solidHeader = TRUE),
                box(title=span(icon("flask", "fa-2x"),HTML(" "),
                               "Measure environment"),
                    p("Perform controlled experiments with aerosols or tracer chemicals."),
                    width=NULL,status="danger",solidHeader = TRUE)

              )
            ),
            shinyglide::screen(
              h2("Analysis and Visualization"),

              flowLayout(
                box(title=span(icon("tachometer-alt-fast", "fa-2x"),HTML(" "),
                               "Create an Interactive Dashboard"),
                    p("Illustrate how different simulated or real factors affect outcomes."),
                    width=NULL, status="warning", solidHeader = TRUE),
                box(title=span(icon("function", "fa-2x"),HTML(" "),
                               "Fit a Mathematical Model"),
                    p("Select and apply a model that describes the physical mechanism"),
                    width=NULL,status="warning",solidHeader = TRUE),
                box(title=span(icon("analytics", "fa-2x"),HTML(" "),
                               "Fit a Statistical Model"),
                    p("Select and apply a model that describes the probability of different results."),
                    width=NULL,status="warning",solidHeader = TRUE)

              )
            )
          )

  ),

  tabItem(tabName="wildfire",

          h1("Wildfire Smoke")

  ),

  tabItem(tabName="tobacco",

          h1("Smoking"),

  )

 )

) )

Define server logic required to draw a histogram

server <- function(input, output) {

}

Run the application

shinyApp(ui = ui, server = server) `

[juba]

Yes, the problem comes from the collapsible sidebar. When you close it, the width of the glide container is modified but the width of the glides themselves is not. If you resize the window, which forces a size recomputing, they should be displayed correctly again. I'm not sure there would be a way to force a resize when the sidebar is collapsed / displayed...

[nklepeis]

Thanks! I added the following to my Shiny server code and it seems to do the job. I detect the sidebar collapse event and fire a window resize javascript event using the shinyjs R package.

observe({
    state <- input$sidebarCollapsed
    # run the following to fire a resize of the window
    #    so the glide screens are resized...
    #  https://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript/18693617#18693617
    runjs("window.dispatchEvent(new Event('resize'));")
})

[juba]

As you may not be alone to encounter this issue, I added a specific listener to "sidebarCollapsed" which forces a glides resize. So I think this should now work correctly out-of-the box with the development version.

Thanks for taking the time to report the issue.