CODEWITHSUNDEEP
rshiny
JohnnyJup
JohnnyJup

Reputation: 117

R Shiny - Resizing the MainPanel window when I minimize the sidebarPanel

I built a Shiny application that has a fluidPage and a layout using the sidebarPanel and mainPanel. Right now I am using a button that minimizes the sidebarPanel but when that happens the mainPanel retains its width. What I would like to happen is the mainPanel adjusts to the new screen size and use the entire window instead of keeping the originall 66% it normally uses.

This is the button event that I am using in the server.r file:

observeEvent(input$showpanel, {

if(input$showpanel == TRUE) {

shinyjs::show(id = "Sidebar")
shinyjs::enable(id = "Sidebar")
}
else {

  shinyjs::hide(id = "Sidebar")
}
})

This is the button I am using in the ui.r file that is currently on the top of the mainPanel window.

mainPanel(
  bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),

Don't know if there's a way to add css or HTML to the mainPanel window when I hide the sidebarPanel.

Upvotes: 1

Views: 1859

Answers (1)

SBista
SBista

Reputation: 7694

You can increase the width by changing the class of the mainPanel from col-sm-8 to col-sm-12. Have a look at the code below:

library(shiny)
library(shinyjs)
library(shinyBS)

ui <- fluidPage(
  useShinyjs(),
  sidebarLayout(

    sidebarPanel(id = "Sidebar",
      h2("This is a sidebar panel")
    ),

    mainPanel(id ="Main",
      bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE)
    )
  )

)

server <- function(input, output, session){
  observeEvent(input$showpanel, {

    if(input$showpanel == TRUE) {
      removeCssClass("Main", "col-sm-12")
      addCssClass("Main", "col-sm-8")
      shinyjs::show(id = "Sidebar")
      shinyjs::enable(id = "Sidebar")
    }
    else {
     removeCssClass("Main", "col-sm-8")
      addCssClass("Main", "col-sm-12")
      shinyjs::hide(id = "Sidebar")
    }
  })


}

shinyApp(ui = ui, server = server)

Upvotes: 4

Related Questions