Align height of boxes with css and bootstrap

[romanceline]

Hi everyone,

I'm trying to achieve something that i thought would be simple but somehow can't get it work.
I am no expert in css or bootstrap but in the example below, i would like my white boxes to be the same height (even if they're not entirely filled with text).
I thought mentioning 'height:100%' in the css definitions would do the trick but no...
I also tried to define a specific min-height which would be ok for some screens but could still result in different heights depending on the screen.

library(shiny)


css <- 
"
#smallbox {color:#3D3D3D;background-color:white;padding:10px;border-radius: 10px;height:100%}
#bigbox {color:#3D3D3D;background-color:#F5F5F5;padding:10px;border-radius: 10px;margin:10px}
"

ui <- fluidPage(
  
  tags$head(
    tags$style(css),
  ),
  
  div(id='bigbox',
      fluidRow(
        column(4,
               div(id='smallbox',
                   'Hello 
                   World')),
        column(4,
               div(id='smallbox',
                   'Test',
                   br(),
                   'Test',
                   br(),
                   'Test')),
        column(4,
              div(id='smallbox',
                  'Test',
                  br(),
                  'Test',
                  br(),
                  'Test',
                  br(),
                  'Test',
                  br(),
                  'Test',
                  br(),))
      )
  )
)
 
server <- function(input, output,session) {
  
}

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

[noveld]

Add style="display:flex;" to your fluidRow. For more styling options see: Link

library(shiny)


css <- 
  "
#smallbox {color:#3D3D3D;background-color:white;padding:10px;border-radius: 10px;height:100%}
#bigbox {color:#3D3D3D;background-color:#F5F5F5;padding:10px;border-radius: 10px;margin:10px}
"

ui <- fluidPage(
  
  tags$head(
    tags$style(css),
  ),
  
  div(id='bigbox',
      fluidRow(style="display:flex;",
        column(4,
               div(id='smallbox',
                   'Hello 
                   World')),
        column(4,
               div(id='smallbox',
                   'Test',
                   br(),
                   'Test',
                   br(),
                   'Test')),
        column(4,
               div(id='smallbox',
                   'Test',
                   br(),
                   'Test',
                   br(),
                   'Test',
                   br(),
                   'Test',
                   br(),
                   'Test',
                   br(),))
      )
  )
)

server <- function(input, output,session) {
  
}

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

[romanceline]

Works perfectly, thanks so much!