CODEWITHSUNDEEP
cssrshiny
Quinn
Quinn

Reputation: 429

How to change fluidRow or column vertical alignment?

I have two columns in a shiny app, I want to vertically align them to the bottom of their columns. I've tried adding styles to the column and the fluid row which contains them with no success. How can I adjust the css of a column to achieve this?

Many thanks!

ui <-
  
  fluidPage(
    
    fluidRow(
      
      column(width = 6, 
             numericInput(inputId = "id_1", label = "Id number 1", value = 1, min = 0, max = 2, step =0.05),
             # style = "vertical-align: bottom"
             ),
      
      column(width = 6, 
             checkboxGroupInput("icons", "Choose icons:",
                                choiceNames = list(icon("calendar"), icon("bed"), icon("cog"), icon("bug")),
                                choiceValues = list("calendar", "bed", "cog", "bug")
                                )),
             # style = "vertical-align: bottom"
             )
    
  )

server <- function(input, output) { }

shinyApp(ui, server)

Upvotes: 0

Views: 777

Answers (1)

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

Reputation: 84529

I don't know how to do that with the bootstrap columns. Here is a way using a flexbox:

css <- "
.bottom-aligned {
  display: flex;
  align-items: flex-end;
}
.bottom-aligned > div {
  flex-grow: 1;
}
"

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML(css))
  ),
  
  fluidRow(
    
    column(
      width = 12,
      div(
        class = "bottom-aligned",
        div(
          numericInput(inputId = "id_1", label = "Id number 1", value = 1, min = 0, max = 2, step = 0.05)
        ),
        div(
          checkboxGroupInput("icons", "Choose icons:",
                             choiceNames = list(icon("calendar"), icon("bed"), icon("cog"), icon("bug")),
                             choiceValues = list("calendar", "bed", "cog", "bug")
          )          
        )
      )
    )

  )
  
)

server <- function(input, output) { }

shinyApp(ui, server)

Upvotes: 1

Related Questions