Reputation: 33
My shiny app has 3 tabPanel in mainPanel, each tabPanel has their own sidebarPanel. I use shinyBS to set sidebarPanel "show and Hide"
bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE)
In server
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")
}
})
I test couple times, 2 tabs work like I expected, but the tab with plots (I use plotly), it appears hiding sidebar but the plots are not automatic stretching out until I click the other tab and go back Plot tab. So if I want to see the plots with full screen, I need to do extra by clicking another tab, and come back.
How do I fix this issue?
Thanks
Upvotes: 1
Views: 4488
Reputation: 1
The functions argument was missing
extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse");
$(window).trigger("resize"); }', functions=c("hideSidebar")),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse");
$(window).trigger("resize"); }', functions=c("showSidebar")),
Upvotes: 0
Reputation: 3760
Next time please post reproducible example...
library(shiny)
library(shinydashboard)
library(plotly)
library(shinyjs)
library(shinyBS)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse");
$(window).trigger("resize"); }'),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse");
$(window).trigger("resize"); }'),
bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
fluidRow(tabsetPanel(id='tabs',
tabPanel(value=1,title="Tab1"),
tabPanel(value=2,title="Tab2"),
tabPanel(value=3, title="Plot",
fluidRow(
column(12,
plotlyOutput('plot', height=800))))
)
)))
server <- function(input, output, session) {
output$plot <- renderPlotly({
plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
})
observe({
if(input$showpanel == TRUE) {
js$showSidebar()
}
else {
js$hideSidebar()
}
})
}
shinyApp(ui, server)
One way to do this is to trigger a window resize event when you add/remove the sidebar to force the plot to be redrawn at the right size after the sidebar is shown/hidden. For this purpose i have used:
useShinyjs(),
extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse");
$(window).trigger("resize"); }'),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse");
$(window).trigger("resize"); }')
functions.
Upvotes: 3