How to vertically align buttons in separate columns of a Shiny app?

March 21, 2023

I have a shiny app with two columns, just like this one:


ui <- fluidPage(
  
  fluidRow(
    column(
      width = 2,
      actionButton("myButton0", "Action0"),
      actionButton("myButton1", "Action1"),
      actionButton("myButton2", "Action2")
    ),
    column(
      width = 6,
      downloadButton("myButton3", "Download")
        
      
    )
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)

I want to vertically align the myButton2 button with the myButton3 button, so that they always are displayed at the same height. I can do this using the argument style = "position: relative; left: 0px; top: 213px", but as this moves the button a fixed amount of pixels, the buttons do not align when the display ratio the user changes

Is there a way to reliably align these buttons?

>Solution :

One option would be to use two fluidRows, one for each row of buttons:

library(shiny)

ui <- fluidPage(
  fluidRow(
    column(
      width = 2,
      actionButton("myButton0", "Action0"),
      actionButton("myButton1", "Action1")
    )
  ),
  fluidRow(
    column(
      width = 2,
      actionButton("myButton2", "Action2")
    ),
    column(
      width = 6,
      downloadButton("myButton3", "Download")
    )
  )
)

server <- function(input, output) {
}