I have a plot which is set to 100% width (default) in the main panel of a two-panel page in R Shiny. The sidebar is hideable through a toggle action button.
When the sidebar is visible (default), the plot fills the width of the main panel. When the sidebar is hidden, I want the plot to expand to fill 100% of the space now available, i.e. the whole browser window. But this does not happen! It keeps the same size.
library(shiny)
library(shinyBS)
UI <- fluidPage(
bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
sidebarLayout(
conditionalPanel(condition = "input.showpanel == true",
sidebarPanel("This is my sidebar.")
),
mainPanel(plotOutput("plot", width = "100%"))
)
)
SERVER <- function(input, output) {
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(UI,SERVER))
Attempted so far:
tags$head(tags$style("#myplot{height:100vh !important;}"))
from this question, Scaling shiny plots to window height.Possible work-arounds:
fluidPage
.(fluidPage
changes the layout dependent on the browser window size. For example, if you make your browser window about the size of a mobile phone, it will place the sidebar above the main panel.)
@konvas answer is really good and probably the way you wan't to do this but if you want to use the sidebarLayout
(and for the sake of giving another answer) you can use jQuery to toggle the bootstrap columns like:
library(shiny)
ui <- fluidPage(
tags$head(
tags$script(
HTML("
$(document).ready(function(){
// Mark columns we want to toggle
$('body').find('div [class=col-sm-4]').addClass('sidebarPanel');
$('body').find('div [class=col-sm-8]').addClass('mainPanel');
})
Shiny.addCustomMessageHandler ('resize',function (message) {
$('.sidebarPanel').toggle();
$('.mainPanel').toggleClass('col-sm-8 col-sm-12');
$(window).trigger('resize')
});
")
)
),
actionButton("showpanel", "Show/hide sidebar"),
sidebarLayout(
sidebarPanel("This is my sidebar."),
mainPanel(plotOutput("plot", width = "100%"))
)
)
server <- function(input, output, session) {
observeEvent(input$showpanel,{
session$sendCustomMessage(type = 'resize', message = 1)
})
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(ui,server))
The same methodology would apply if you use columns in a fluidRow
or something similar.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With