Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Change the width of the main panel depending on what tab is open
library(shiny)
ui <- fluidPage(
shinyjs::useShinyjs(),
# You have to include this one-liner CSS
tags$style(".fullwidth { width: 100% !important; }"),
# You need to wrap the sidebarLayout() by a div() and give it an ID
div(id = "SOMEID",
sidebarLayout(
sidebarPanel(
"side panel"
),
mainPanel(
tabsetPanel(
id = "maintabs",
tabPanel(
"tab1",
"Tab 1 show"
),
tabPanel(
"tab2",
"Tab 2 hide"
),
tabPanel(
"tab3",
"Tab 3 show"
),
tabPanel(
"tab4",
"Tab 4 hide"
)
)
)
)
)
)
server <- function(input, output) {
observe({
if (input$maintabs %in% c("tab1", "tab3")) {
# In all these shinyjs functions, you need to use the same ID as you used in the div in the UI
shinyjs::show(select = "#SOMEID > div > div:nth-child(1)")
shinyjs::removeClass(class = "fullwidth",
select = "#SOMEID > div > div:nth-child(2)")
} else {
shinyjs::hide(select = "#SOMEID > div > div:nth-child(1)")
shinyjs::addClass(class = "fullwidth",
select = "#SOMEID > div > div:nth-child(2)")
}
})
}
shinyApp(ui = ui, server = server)
@jgraille
Copy link

jgraille commented Oct 6, 2020

Thank you for this script exemple. It helps me a lot to manage the fullwidth option for the div class. 👍

@daattali
Copy link
Author

daattali commented Oct 12, 2020

Awesome! I forgot I ever made this :)

@daattali
Copy link
Author

daattali commented Oct 12, 2020

How did you find this?!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment