CODEWITHSUNDEEP
rshinyheightshinydashboardbox
akshay bholee
akshay bholee

Reputation: 81

Shiny boxes resize height dynamically

I am displaying 3 shiny boxes as follows: enter image description here

I have two filters countries. The headers of the boxes change based on both of the filters. Now the issue is when the header is split in two lines in the first box the height increases but the two other boxes height remain the same thus the heights are not aligned. How can I achieve the adjustment of the height automatically? An example would be great on which I can work on.

Upvotes: 0

Views: 129

Answers (1)

Miha
Miha

Reputation: 2884

It is hard to test this without the example of the data but you could try to wrap the boxes in a container and apply display: flex to that container.

So the code would be something like this

library(shiny)
ui <- fluidPage(
  tags$head(
    tags$style(
        "
        .flex-container {
          display: flex;
        }
        <!--  Because I do now have actual code and figures I've added border around the box (this may not be needed in your case) only flex-container -->
        .shiny-box {
          border: 1px solid black;
          padding: 20px;
          margin: 5px;
          flex: 1;
        }
"
    )
  ),
  
  div(class = "flex-container",
      div(class = "shiny-box", "UAE customs efficiency."),
      div(class = "shiny-box", "Clear exports. some text some more text some more text gor height purposes ............"),
      div(class = "shiny-box", "Clear imports.")
  )
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

And the output enter image description here

Upvotes: 1

Related Questions