R 闪亮-当其中一个面板设置为“隐藏”时，调整其他面板的大小

我正在使用Shiny构建一个web应用程序。我正在添加一个按钮，该按钮将显示/隐藏页面上的某些元素。但是在隐藏元素之后，其他页面组件不会调整自身大小以填充屏幕。例如，我尝试使用shinyjs中的切换函数来隐藏侧边栏布局的侧边栏。以下是我的代码：

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(sidebarLayout(
  sidebarPanel(id="sidebar"),
  mainPanel(wellPanel(actionButton("sideBarControl", label = "Show/Hide")))
)))
server <- function(input, output) {
  observeEvent(input$sideBarControl, {
    shinyjs::toggle(id = "sidebar")
    # potentially some statements here to fix the layout? But what should they be?
  })
}
shinyApp(ui = ui, server = server)

正确单击侧边栏控制按钮时，侧边栏会隐藏/显示，但它不会调整mainPanel的大小以填充屏幕，而是将mainPanel向左移动，并在右侧留下一个空间。如何解决这个问题？见下图：

试试shinydashboard怎么样？默认情况下，它具有您要查找的行为

---

让我回应一下对我先前建议的评论。因为这与之前的答案有很大不同，所以我写了一个新的答案，而不是编辑它

通常，您可以通过在控制台上运行命令来检查从UI描述生成的HTML代码。比如说,

sidebarPanel(id="sidebar", actionButton("b", "btn"))
##<div class="col-sm-4">
##  <form class="well" id="sidebar">
##    <button id="b" type="button" class="btn btn-default action-button">btn</button>
##  </form>
##</div>

您可以看到，column的输出类似于sidebarPanel的输出。重要的是，列允许您为div元素提供一个ID

下面是一个玩具示例，它将主面板向左移动，即完全隐藏侧边栏

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, wellPanel(actionButton("sideBarControl", 
                                         label = "Show/Hide")))
)))

server <- function(input, output) {
  observeEvent(input$sideBarControl, {
    shinyjs::toggle(id = "spcol")
  })
}
shinyApp(ui = ui, server = server)

此外，这里还有另一个工作示例代码，其中隐藏了两个不同宽度的主面板版本，并依次显示

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, id="main1", wellPanel(actionButton("sideBarControl", 
                                        label = "Show/Hide"))),
  column(width=12, id="main2", wellPanel(actionButton("sideBarControl2", 
                                        label = "Show/Hide")))
)))

server <- function(input, output) {
  shinyjs::toggle(id = "main2")

  observeEvent(input$sideBarControl+input$sideBarControl2, {
    shinyjs::toggle(id = "spcol")
    shinyjs::toggle(id = "main1")
    shinyjs::toggle(id = "main2")
  })
}
shinyApp(ui = ui, server = server)

---

无法使用Shining_1.0.3复制：面板已隐藏，但主面板未调整大小或移动。我刚从浏览器运行时注意到，它也不会移动。我从R-studio视图面板运行。不过，我还是希望主面板和里面的内容能够自动调整大小以填充屏幕宽度，而不是仅仅停留在那里。嗨，谢谢你的建议。在这种情况下，我可以使用shinydashboard，但我问了这个问题，当页面上隐藏某些内容时，我们如何自动调整页面上其他元素的大小以适应屏幕，而不仅仅是特定的侧栏，可能是另一个面板，甚至是按钮，使用shinyjs输入文本或页面上的其他元素。

mainPanel()
##<div class="col-sm-8"></div>

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, id="main", wellPanel(actionButton("sideBarControl", 
                                                     label = "Show/Hide")))
)))

server <- function(input, output) {
  observeEvent(input$sideBarControl, {
    shinyjs::toggle(id = "spcol")
    shinyjs::toggleClass("main", "col-sm-8")
    shinyjs::toggleClass("main", "col-sm-12")
  })
}
shinyApp(ui = ui, server = server)

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, id="main1", wellPanel(actionButton("sideBarControl", 
                                        label = "Show/Hide"))),
  column(width=12, id="main2", wellPanel(actionButton("sideBarControl2", 
                                        label = "Show/Hide")))
)))

server <- function(input, output) {
  shinyjs::toggle(id = "main2")

  observeEvent(input$sideBarControl+input$sideBarControl2, {
    shinyjs::toggle(id = "spcol")
    shinyjs::toggle(id = "main1")
    shinyjs::toggle(id = "main2")
  })
}
shinyApp(ui = ui, server = server)