闪亮 - 当其中一个设置为隐藏时调整其他面板的尺寸

问题描述：

我使用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)

侧边栏隐藏/正确点击sidebarControl按钮时表示，但代替调整的mainPanel填满屏幕，它改变的mainPanel到左侧，并使其在右侧的空间。如何解决这个问题？见下面的图片：

Before hiding the sidebar

After hiding the sidebar - actual

After hiding the sidebar - expected

不能shiny_1.0.3重现：面板是隐藏的，但主面板既不是调整大小也不动 – HubertL

当我从不会转向以及在浏览器中运行我只注意到。我从R-studio视图面板运行。但是，我仍然希望mainPanel和内部的内容自动调整大小以填充屏幕宽度，而不是只停留在那里。 – HiLos

答

如何尝试shinydashboard？它有你默认寻找的行为。

https://rstudio.github.io/shinydashboard/get_started.html

嗨，感谢您的建议。在这种情况下，我可以使用shinydashboard，但我提出这个问题，当页面上隐藏东西时寻求更一般的解决方案，我们如何自动调整页面上的其他元素以适应屏幕，而不仅仅是特定的侧边栏，可能是另一个面板，甚至按钮，使用shinyjs在页面上输入文本或其他元素。 – HiLos

答

让我对我以前建议的评论作出回应。由于这与以前完全不同，我写了一个新的答案，而不是编辑它。

通常，您可以通过在控制台上运行命令来检查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>

这告诉我们，sidebarPanel函数生成的

div与col-sm-4类嵌套框架;和
form与提供的ID

之所以你的示例代码没有转移的主面板现在是明确的;即使你隐藏sidebar，这是里面的形式，仍然有div包含它。

所以我们想要一种方法来隐藏div。不幸的是，我找不到使用sidebarPanel函数的方法。另一种方法是使用column函数。

column(width=3, id="col", actionButton("b", "btn")) 
##<div class="col-sm-3" id="col"> 
## <button id="b" type="button" class="btn btn-default action-button">btn</button> 
##</div>

你可以看到，column输出是一种类似的sidebarPanel。重要的是，column允许您为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)

现在，让我们解决您的第二点，即让主面板填充而不是移位。

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

所以它不填充，因为它的宽度设置为8。我们希望将其更改为12，并且我们可以使用shinyjs函数中的toggleClass函数。简而言之，toggleClass向元素添加一个类（如果它没有），如果它已经存在，则删除该类。
我相信下面的代码表现得如我们所愿。

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)

闪亮 - 当其中一个设置为隐藏时调整其他面板的尺寸

相关推荐