How do I reduce the width of the sidebar panel in an R Shiny web app?

Question

library(shiny)

ui <- fluidPage(

    titlePanel("Hello"),
    sidebarLayout(
        sidebarPanel("Hello SideBar"),
        mainPanel("Hello MainPanel")
    )
)

server <- function(input, output) {

    
}

shinyApp(ui = ui, server = server)

Just by eyeballing I can tell right now my sidebar panel takes up about 33% of the width of the screen. Any idea how I can reduce the width of the sidebar so that the main Panel is larger?

Answer 1

sidebarPanel has a width argument

width: The width of the sidebar. For fluid layouts this is out of 12 total units; for fixed layouts it is out of whatever the width of the sidebar's parent column is.

The default width is 4, which confirms your eyeballing estimate that 4/12 is one third. So to make it e.g 1/2 the current width you would do:

ui <- fluidPage(

    titlePanel("Hello"),
    sidebarLayout(
        sidebarPanel("Hello SideBar", width=2),
        mainPanel("Hello MainPanel")
    )
)

Answer 2

Setting the width argument to a value between 1-12 causes a bug for me where the sidebar disappears, however, this can be fixed by defining the width in pixels (e.g. "250px" is the default value).

The code below sets width = "150px to reduce the sidebar width. Set width to a value greater than 250px to increase the sidebar width.

ui <- function() {
  bslib::page_sidebar(
    title = "Testing Sidebar",
    sidebar = bslib::sidebar(
      title = "Sidebar", width = "150px",
      shiny::HTML("Text Here")
    ),
    shiny::fluidPage(
      shiny::fluidRow(
        shiny::HTML("Hello World!")
      )
    )
  )
}

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

shiny::shinyApp(ui, server)