CODEWITHSUNDEEP
cssrshiny
Wei
Wei

Reputation: 151

Set height of a page column in Shiny R

I recently asked a question on how to grey out an entire column of a Shiny App page here. However I found out that the page column's height is determined by the height of the objects inside, meaning that the grey out is adjusted to the column height, and does not applied to the blank space below it, if there's any. My solution is to make sure all columns' heights fill the whole page, rather than according to the height of objects inside. But how do I adjust the column height?

Here's a 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)

Upvotes: 1

Views: 1482

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

You can use the CSS height:100vh to your columns:

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

Or, simpler, put it in the class:

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

Upvotes: 3

Related Questions