rshinybslib

How to prevent plotOutput from resizing when a modal opens or closes in Shiny?


I am testing a modal in the Shiny app I am developing. I noticed that when the modal opens or closes, the plotOutput briefly resizes, which is a bit distracting.

enter image description here

I'd like to ensure that users are not distracted by minor visual shifts like this. I am wondering how to prevent plotOutput from resizing when the modal appears or disappears in Shiny.

The minimal reproducible example is attached below:

library(shiny)
library(bslib)
library(ggplot2)

ui <- page_fillable(
    
    theme   = bs_theme(version = 5),
    
    div(
        tags$span(
            style = "vertical-align: bottom;",
            actionButton("b", "", icon = icon("question"))
        )
    ),
    
    card(
        plotOutput(outputId = "iris")
    )
)

server <- function(input, output, session) {
    observeEvent(input$b, {
        showModal(
            modalDialog(
                title = "Somewhat important message",
                
                card(
                    card_header("Placeholder")
                ),
                
                easyClose = TRUE,
                size = "l",
                footer = modalButton("Ok")
            ))
    })
    
    
    output$iris <- renderPlot({
        iris |> 
            ggplot(aes(x = Sepal.Length, y = Sepal.Width, colour = Species)) +
            geom_line() +
            theme_minimal()
    })
}

shinyApp(ui, server)

Solution

  • The problem is with page_fillable, try page_fixed instead.

    out


    If you want to keep the fillable behavior of the components, but want to isolate the plotly-Output, you can wrap it like

    card(
        htmltools::div(style="height:900px !important;", plotOutput(outputId = "iris", height="900px"))
      )