时间戳

首页 > 解决方案 > 在 Shiny R 中设置页列的高度

css - 在 Shiny R 中设置页列的高度

问题描述

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

这是一个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)

标签： cssrshiny

解决方案

您可以在列中使用 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;
}

推荐阅读