I want to resize my bs4Dash controlbar on a button click- specifically, when clicking on a controlbaritem button. I can't seem to get updateControlbar()
to work the way I want it to (e.g, resize the controlbar from 350 to 600px). Is my requirement possible?
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(uiOutput("sidebar")),
body = dashboardBody(),
controlbar = dashboardControlbar(
id = "controlbar",
wdth = 350,
pinned = TRUE,
controlbarMenu(
id = "menu",
type = "pills",
controlbarItem(id = "button1", title = "button1"),
controlbarItem(id = "button2", title="button2")
)
)
),
server = function(input, output, session) {
output$sidebar <- renderMenu({
sidebarMenu(id = "main_menu",
menuItem(text = "First page", tabName = "tab1"),
menuItem(text = "Second page", tabName = "tab2")
)
})
observeEvent(input$button2, {
updateControlbar(id = "controlbar", session=session, width = 600)
})
}
)
Feels like updateControlbar
won't allow you to change the width, I read the help file and it seems update width is not an option (correct me if I am wrong).
Here I provide you an alternative option, using javascript from UI to directly update the UI. All you need to do is add the following line to your body
,
tags$script('$(function(){$(\'[data-value="button2"]\').click(function(){$("#controlbar").css("width", "600px")})})')
like this
body = dashboardBody(tags$script('$(function(){$(\'[data-value="button2"]\').click(function(){$("#controlbar").css("width", "600px")})})')),
change 600px
to whatever the width you want.