英文:
How to control the main panel width in Shiny App during collapse and expand?
问题
我想让主面板在切换时恢复到原始位置,同时还原宽度。
英文:
I have a shiny
app with side bar and main panel where on clicking the toggle button, sidebar collapses and main panel expands (width also increases). But when I try to click the toggle button again the main panel width stays the same with Sidebar expanded and Main panel underneath the Sidebar.
Example Code:
library(shiny)
library(bsplus)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
tags$style(HTML(
"#mainPanel {
background-color: blue;
color: white;
}"
)),
titlePanel("Toggler"),
tags$div(id = "sidebar",
sidebarPanel(
bs_accordion(
id = "accordion"
) %>%
bs_set_opts(
use_heading_link = TRUE
) %>%
bs_append(
title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
content = fileInput("upload", "Upload a Excel File",
accept = c(".xlsx",".csv"))
) ,
use_bs_accordion_sidebar()
)
),
mainPanel(
id = "mainPanel",
actionButton("toggle_btn", "Toggle"))
)
server <- function(input, output, session) {
options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
session$onSessionEnded(function() {
stopApp()
})
observeEvent(input$toggle_btn, {
shinyjs::toggle(id = "sidebar")
if (input$toggle_btn) {
runjs('$("#mainPanel").css("width", "100%");')
} else {
runjs('$("#mainPanel").css("width","20%");')
}
})
}
shinyApp(ui, server)
Result:
I want the main Panel to return back to its original position along with width on toggle.
答案1
得分: 1
The if
condition on input$toggle_btn
won't work. You can put a boolean value which measures the state of the button inside an reactiveValues
and change this state when the toggle button is clicked. Also we edit the CSS
such that the formatting will return to the original style.
library(shiny)
library(bsplus)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
tags$style(HTML(
"#mainPanel {
background-color: blue;
color: white;
}"
)),
titlePanel("Toggler"),
tags$div(id = "sidebar",
sidebarPanel(
bs_accordion(
id = "accordion"
) %>%
bs_set_opts(
use_heading_link = TRUE
) %>%
bs_append(
title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
content = fileInput("upload", "Upload a Excel File",
accept = c(".xlsx",".csv"))
) ,
use_bs_accordion_sidebar()
)
),
mainPanel(
id = "mainPanel",
actionButton("toggle_btn", "Toggle"))
)
server <- function(input, output, session) {
options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
session$onSessionEnded(function() {
stopApp()
})
bln <- reactiveValues(hidden = FALSE)
observeEvent(input$toggle_btn, {
shinyjs::toggle(id = "sidebar")
if (!bln$hidden) {
runjs('$("#mainPanel").css("width", "100%");')
bln$hidden <- TRUE
} else {
runjs('$("#mainPanel").css("width","66.66%");')
bln$hidden <- FALSE
}
})
}
shinyApp(ui, server)
英文:
The if
condition on input$toggle_btn
won't work. You can put a boolean value which measures the state of the button inside an reactiveValues
and change this state when the toggle button is clicked. Also we edit the CSS
such that the formatting will return to the original style.
library(shiny)
library(bsplus)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
tags$style(HTML(
"#mainPanel {
background-color: blue;
color: white;
}"
)),
titlePanel("Toggler"),
tags$div(id = "sidebar",
sidebarPanel(
bs_accordion(
id = "accordion"
) %>%
bs_set_opts(
use_heading_link = TRUE
) %>%
bs_append(
title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
content = fileInput("upload", "Upload a Excel File",
accept = c(".xlsx",".csv"))
) ,
use_bs_accordion_sidebar()
)
),
mainPanel(
id = "mainPanel",
actionButton("toggle_btn", "Toggle"))
)
server <- function(input, output, session) {
options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
session$onSessionEnded(function() {
stopApp()
})
bln <- reactiveValues(hidden = FALSE)
observeEvent(input$toggle_btn, {
shinyjs::toggle(id = "sidebar")
if (!bln$hidden) {
runjs('$("#mainPanel").css("width", "100%");')
bln$hidden <- TRUE
} else {
runjs('$("#mainPanel").css("width","66.66%");')
bln$hidden <- FALSE
}
})
}
shinyApp(ui, server)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论