rshinybslib

Why does page_fillable not fill the remaining panel space?


I am trying to use the page_fillable function in Shiny to ensure that my panels fill the remaining page space. However, when I run the example code below, I see that the Data (green area) and Plot (blue area) panels do not fill the remaining page space, leaving a large blank area on the right side of the page. How can I fix this issue?

Here is the reproducible example code:

library(shiny)
library(shinyWidgets)
library(bslib)

ui <- 
  page_sidebar(
    titlePanel("A shiny example"),
    sidebar = sidebar(
      title = 'a sidebar',
      id = "sidebar",
    ),
    
    mainPanel(
      
      tabsetPanel(
        tabPanel('Data', 
                 div(style = "background-color: green; padding: 10px;",
                     page_fillable(
                       tableOutput('dt')
                     )
                 )
        ),
        tabPanel('Plot', 
                 page_fillable(
                   div(style = "overflow-x: scroll; overflow-y: scroll; background-color: blue;",
                       plotOutput("pplot"))
                 )
        )
      )
    )
  )


server <- function(input, output, session){ 
}

shinyApp(ui = ui, server = server)

The resulting Shiny app looks like the screenshot below:

enter image description here


Solution

  • Simply wrapping something in a fillable layout provided by bslib does not mean that it will fill or is fillable.

    According to the docs

    All “raw” HTML tags (e.g., div(), p(), etc.) as well as many Shiny UI elements (e.g., wellPanel(), etc.) are neither fillable nor fill (i.e., we’ll call these non-fill elements).

    Instead I would suggest to use fillable items and containers provided by bslib, e.g. drop mainPanel which is not required and instead of tabsetPanel and tabPabel use bslib::navset_tab and bslib::nav_panel:

    library(shiny)
    library(bslib)
    #> 
    #> Attaching package: 'bslib'
    #> The following object is masked from 'package:utils':
    #> 
    #>     page
    
    ui <- page_sidebar(
      titlePanel("A shiny example"),
      sidebar = sidebar(
        title = "a sidebar",
        id = "sidebar",
      ),
      navset_tab(
        nav_panel(
          "Data",
          div(
            style = "background-color: green; padding: 10px;",
            tableOutput("dt")
          )
        ),
        nav_panel(
          "Plot",
          div(
            style = "overflow-x: scroll; overflow-y: scroll; background-color: blue;",
            plotOutput("pplot")
          )
        )
      )
    )
    
    server <- function(input, output, session) {
    }
    
    shinyApp(ui, server)
    #> 
    #> Listening on http://127.0.0.1:4107