[Bug]: plotly inside router does not fill the page when used inside bslib::page_fillable

[vibalre]

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

No response

Platform and OS Version

No response

Existing Issues

No response

What happened?

We are using bslib:page_fillable . Without shiny.router , plots and cards are fillable. With shiny.router, plots and cards are no longer fillable.

Steps to reproduce

1. Create a UI using bslib::page_fillable.
2. Add a shiny.router::router_ui.
3. Wrap a plotly inside shiny.router::route.
4. Create server to render plotly.
5. Run app.

Expected behavior

The plots inside the router should still fill the page.

Attachments

# Plot occupies full height
ui <- bslib::page_fillable(
  bslib::card(
    shiny::h1("Hello"),
    plotly::plotlyOutput("my_plot")
  )
)

server <- function(input,output) {
  output$my_plot <- plotly::renderPlotly(
    plotly::plot_ly(mtcars, x = ~cyl, y = ~mpg, type = "scatter", mode = "markers")
  )
}

shiny::shinyApp(ui, server)

# Plot only occupies about the top half of the window with router
ui <- bslib::page_fillable(
  shiny.router::router_ui(
    shiny.router::route(
      "/",
      shiny::h1("Hello")
    ),
    shiny.router::route(
      "plots",
      plotly::plotlyOutput("my_plot")
    )
  )
)

server <- function(input,output, session) {
  shiny.router::router_server()

  output$my_plot <- plotly::renderPlotly(
    plotly::plot_ly(mtcars, x = ~cyl, y = ~mpg, type = "scatter", mode = "markers")
  )
}

shiny::shinyApp(ui, server)

Screenshots or Videos

No router

With router

Additional Information

Workaround for plots to fill page is to add classes to .html-fill-container and .html-fill-item to both .router-page-wrapper and .router. It would be nice to have an easy way to add classes to these router classes.

# Should be possible as JS too
ui <- function() {
  app_ui <- bslib::page_fillable(
    shiny.router::router_ui(
      shiny.router::route(
        "/",
        shiny::h1("Hello")
      ),
      shiny.router::route(
        "plots",
        plotly::plotlyOutput("my_plot")
      )
    )
  )
  
  all_tags <- htmltools::tagQuery(app_ui)
  all_tags$find("#router-page-wrapper")$addClass("html-fill-item html-fill-container")
  all_tags$find(".router")$addClass("html-fill-item html-fill-container")
  
  all_tags$allTags()
}

server <- function(input,output, session) {
  shiny.router::router_server()
  
  output$my_plot <- plotly::renderPlotly(
    plotly::plot_ly(mtcars, x = ~cyl, y = ~mpg, type = "scatter", mode = "markers")
  )
}

shiny::shinyApp(ui, server)

[ugurdar]

Hi!

I got similar problem with page_navbar.

I tried to add classes to router but I couldn't implement it.
Also when I use nav_panel it's not working well. It activated at the begining.

ui <- function() {
  app_ui <- tagList(
    page_navbar(
      nav_item(
        a("Home", href = route_link("/"))
      ),
      nav_item(
        a("Page1", href = route_link("page1"))
      ),
      nav_panel(
        title = "Page2", tagList(h2("Welcome"),h2("Page 2"))
      )
    ),
    router_ui(
      route("/", tagList(h2("Welcome"),h2("Homepage"))),
      route("page1",tagList(h2("Welcome"),h2("Page 1")))
    )
  )
  
  all_tags <- htmltools::tagQuery(app_ui)
  all_tags$find("#router-page-wrapper")$addClass("container-fluid html-fill-item html-fill-container")
  all_tags$find(".router")$addClass("tab-pane html-fill-item html-fill-container bslib-gap-spacing")
  all_tags$allTags()

}

server <- function(input,output, session) {
  shiny.router::router_server()
}

shiny::shinyApp(ui, server)

Is there any way to use nav_panel with shiny.router?

[yoelii]

Hello,

I have the same behavior in my Shiny app using shiny.router and plotly :

• all links with other pages without plotly come at the top of the page
• for the page with plotly, the focus is given to the plot at the botton of the page.

The focus is correct when I go to other page with nav menu but not by clicking on button on botton page.