Shiny: How can I vertically align text with a button in a column

How do I vertically center text with a column. In the toy example below when the button is pressed the text will align with the top of the button, but I would like it to be vertically centered relative to the button. ie BUTTON should be aligned with BUTTON PRESSED.

library(shiny)

ui <- fluidPage(
    fluidRow(column(12, align = "center", "...")),
    fluidRow(
        column(6, align = "right", actionButton("Button", label = "BUTTON")),
        column(6, align = "left", textOutput("TextOutput"))
    )
)

server <- function(input, output) {
    observeEvent(input$Button, {
        output$TextOutput <- renderText("BUTTON PRESSED")
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

Hi @GraemeS. You may try to use table instead of column.

library(shiny)

ui <- fluidPage(
  fluidRow(column(12, align = "center", "...")),
  tags$table(style = "width: 100%",
             tags$tr(tags$td(style = "width: 50%",
                             align = "right",
                             actionButton("Button", label = "BUTTON")),
                     tags$td(textOutput("TextOutput"))))
  
  # fluidRow(
  #   column(6, align = "right", actionButton("Button", label = "BUTTON")),
  #   column(6, align = "left", textOutput("TextOutput"))
  # )
)

server <- function(input, output) {
  observeEvent(input$Button, {
    output$TextOutput <- renderText("BUTTON PRESSED")
  })
}

# Run the application 
shinyApp(ui = ui, server = server)
1 Like

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.