bottom alignment of two side-by-side wellpanels in Shiny

user_3871924 0
Viewed 2583

I'm trying to code a shiny layout with 2 horizontal well Panels, one on the right one on the left, but the one on the right should be composed of 2 vertical well Panels itself.

I can't make them align at the bottom. Is that possible? My simplified app below. I tried to add a fluidrow to put them both, but it doesn't change anything. 

ui <- tagList( navbarPage(id="navbar", title="title",
                          tabPanel(title="Home",
                                   titlePanel(title="Welcome"),
                                   column(6,
                                          wellPanel(
                                               h2("Hello World"),
                                               br(),
                                               h4("some text"))),
                                   column(6,
                                          fluidRow(
                                               wellPanel(
                                                    h2("News"),
                                                    br(),
                                                    h4("Some other text"),
                                                    br(),
                                                    fluidRow(column(6, 
                                                                    h5("Some info:")),
                                                             column(6, 
                                                                    div(actionButton("button", "button"), style="float:right") 
                                                             )))),
                                          fluidRow(
                                               wellPanel(div(img(src="https://cran.r-project.org/Rlogo.svg", width=100), style="text-align: center;")
                                               )))),
                          tabPanel(title="anothertabl", value="anothertabl"))
)
server=function(input, output, session){}
shinyApp(ui, server)

It should look like this, with both wellPanels automatically adapting to the longest one enter image description here

shiny fluid-layout alignment r
2 Answers

I wasn't able to get the solution above to work for my use case, but got it working by manually specifying the same height for each wellPanel. It might not be ideal to hardcode the heights in every case, but it's a simple solution that would often work just fine. For example:

fluidRow(
  column(width = 3, offset = 3,
         wellPanel(style = "height:150px",
                   "wellPanel1 content")),
  column(width = 3,
         wellPanel(style = "height:150px", 
                   "wellPanel2 content"))
)
user_76328980
Related