rstudio / bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
https://rstudio.github.io/bslib/
Other
466 stars 57 forks source link

dev branch "Plots adjustment problems with the cards and full screen" #450

Closed apalacio9502 closed 1 year ago

apalacio9502 commented 2 years ago

Hello @cpsievert,

I closed the previous issue to put here all the problems I see based on the latest modifications.

  1. If bslib::bs_theme(bootswatch="shiny") and no other variable like bg or fg is defined when closing the full screen the plot does not adjust to the size of the card and goes out of the card. This does not happen if the bootswatch is different from "shiny".

  2. When closing the full screen the plot does not adjust to the size of the card, but does not leave the card instead the scroll bar is activated. This happens with all bootswatches except "shiny".

image

  1. In full screen when the height or width of the window is increased the plot adjusts correctly. However when decreasing the height or width of the window the plot is not adjusted and the scroll bar is activated. With bootswatch ="shiny" in some situations it works correctly.

image

  1. It is not clear if to put a plot inside a navs_tab_card you must use something inside the nav, for example nav("Test", card_body_stretch(plotlyOutput("plot_1", height = "100%")). I tried nav("Test", card_body_stretch(plotlyOutput("plot_1", height = "100%")) and problem 2 happens too. I also tried nav("Test", plotlyOutput("plot_1", height = "100%") and when exiting full screen the plot size adjusts but the width and height is reduced with respect to the original.

  2. If the height of the card is not defined when closing the full screen the plot is not adjusted.

Regards


library(shiny)
library(bslib)
library(plotly)

ui <- page_navbar(
  title = "Test", theme =  bslib::bs_theme(bootswatch = "shiny",bg = "black",fg="white"),fluid = TRUE,
  nav("Test",
      fluidRow(
        column(6,
               card(card_header("Plot 1"),
                    full_screen = TRUE,
                    height = "500px",
                    card_body_stretch(plotlyOutput("plot_1", height = "100%"))
               )),
        column(6,
               card(card_header("Plot 2"),
                    full_screen = TRUE,
                    height = "500px",
                    card_body_stretch(plotlyOutput("plot_2", height = "100%"),padding = NULL)
               )),
        column(12,
               navs_tab_card(
                 title = "Card with Tabs for Parameters",
                 height = "500px",
                 full_screen = TRUE,
                 nav("ggplot2", card_body_stretch(plotlyOutput("plot_3", height = "100%"))),
                 nav("base", plotlyOutput("plot_4", height = "100%"))
               )

      )
      )

  )
)

server <- function(input, output) {

  output$plot_1 <- renderPlotly({
    fig <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

  output$plot_2 <- renderPlotly({
    fig <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

  output$plot_3 <- renderPlotly({
    fig <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

  output$plot_4 <- renderPlotly({
    fig <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

}

shinyApp(ui = ui, server = server)`
cpsievert commented 1 year ago

I'm pretty sure the latest API doesn't suffer from these (which was just merged into main), but please open a new issue (with another reprex) if they still persist, thanks!

github-actions[bot] commented 1 year ago

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.