在 Shiny R 中设置页列的高度答案

【问题标题】：Set height of a page column in Shiny R在 Shiny R 中设置页列的高度
【发布时间】：2021-09-26 09:55:45
【问题描述】：

我最近问了一个问题，关于如何将 Shiny App 页面 here 的整个列变灰。但是我发现页面列的高度是由内部对象的高度决定的，这意味着灰色调整到列高，并且不适用于它下面的空白区域，如果有的话。我的解决方案是确保所有列的高度填满整个页面，而不是根据内部对象的高度。但是如何调整列高呢？

这是一个 MWE：

library(shiny)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    tags$head(tags$style(
    '
    .grey-out {
        background-color: #eee;
        opacity: 0.2;
    }
    '
    )),
    navbarPage(title = "Grey out",
               tabPanel(title = "test",
                        column(width = 6, id ="left",
                               actionButton(inputId = "go", label = "GO"),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ....")
                        ),
                        column(width = 6, id ="right",
                               actionButton(inputId = "back", label = "BACK"),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ...."),
                               p("some text ....")
                        ),
                        tags$script(
                        '
                        $("#go").click(function(){
                            $("#left").addClass("grey-out");
                            $("#right").removeClass("grey-out");
                        });
                        $("#back").click(function(){
                            $("#right").addClass("grey-out");
                            $("#left").removeClass("grey-out");
                        });
                        '
                        )
               )
    )
)

server <- function (session, input, output) {
    disable(id = "back")
    observe({
        req(input$go)
        enable(id = "right")
        disable(id = "left")
    })

    observe({
        req(input$back)
        enable(id = "left")
        disable(id = "right")
    })
}

shinyApp(ui = ui, server = server)

【问题讨论】：

标签： css r shiny

【解决方案1】：

您可以在列中使用 CSS height:100vh：

                  column(width = 6, id ="left",
                         style = "height: 100vh;",
                         actionButton(inputId = "go", label = "GO"),
                         ......

或者，更简单，把它放在类中：

.grey-out {
    background-color: #eee;
    opacity: 0.2;
    height: 100vh;
}

【讨论】：