CODEWITHSUNDEEP
rshinyalignmentfluid-layout
agenis
agenis

Reputation: 8377

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

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

Upvotes: 2

Views: 3158

Answers (2)

ecpeterson
ecpeterson

Reputation: 11

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"))
)

Upvotes: 1

Bertil Baron
Bertil Baron

Reputation: 5003

This is not really simple.

I added a row around the columns that I cave postion:relative. then I made the first shorter column position:absolute and set it to span the whole heigth with top:0;bottom:0;left:0;. since the first column has position absolute we must add an offset = 6 to the second column, otherwise would both columns be placed on top of each other.

library(shiny)
ui <- tagList( navbarPage(id="navbar", title="title",
                          tabPanel(title="Home",
                                   titlePanel(title="Welcome"),
                                   fluidRow(
                                     style = "position:relative",
                                     column(6,
                                            style = "position:absolute;top:0;bottom:0;left:0;padding-bottom:19px",
                                            wellPanel(
                                              style = "height:100%;",
                                              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;")
                                              )),
                                            offset = 6)

                                   )
                                   ),
                          tabPanel(title="anothertabl", value="anothertabl"))
)
server=function(input, output, session){}
shinyApp(ui, server)

hope this helps!

Upvotes: 0

Related Questions