Avoid column-stacking in fluidRow when adding margins

Gonzalo T F 0
Viewed 48

I'm building a Shiny app, and I need to add some space (lets say ~5px) between columns in my 5-column layout. However, when I add left/right margins, the last column moves to the bottom of the previous one. My columns are required to:

  • Have a separation of ~5px between them, as shown in Image3.
  • Have roughly the same width (the layout resulting from my code is fine in that sense).
  • Central column needs to have a solid background.
  • The other ones need white background and a colored solid border.

I have read the documentation about css padding, margins and borders, and whether they increase the width of objects. I tried using box-sizing: border-box with no luck. I've also found some similar questions in SO but they are not Shiny related, and—as it can be deducted from my code—I'm not very experienced with CSS. Since my app is almost finished, I'd prefer an answer that uses in-line CSS.

library(shiny)
box_content <- p("color bordered", br(), "box")
central_box <- p("white bordered", br(), "central box")
st_box <- "margin: 0px 5px; border-radius: 25px; padding: 12px; box-sizing: border-box; border: 2px solid #F7941E; height: 169px; background-color: #ffffff; color: #444444;"
st_cent <- "margin: 0px 5px; border-radius: 25px; padding: 12px; box-sizing: border-box; border: 2px solid #ffffff; height: 169px; background-color: #79BDE8; color: #ffffff;"

ui <- fluidPage(
  fluidRow( # boxes row
    height = "185px",
    column(5, # boxes 1-2
           fluidRow( 
             height = "185px",
             column(6, # box1
                    style = st_box,
                    box_content),
             column(6, # box2
                    style = st_box,
                    box_content))),
    column(7, # boxes 3-5
           fluidRow(
             height = "185px",
             column(4, # central_box
                    style = st_cent,
                    central_box ),
             column(4, # box3
                    style = st_box,
                    box_content ),
             column(4, # box4
                    style = st_box,
                    box_content)))))
  
server <- function(input, output) { }
shinyApp(ui = ui, server = server)

Image1: Layout with no margins - notice central box has actually a white border

Image2: Layout with 5px margin - this is the image resulting from running the code shown

Image3: What I need

shiny r
1 Answers

classic bootstrap columns allow you to compose a layout from 12 abstracted columns; that you can apportion amongst the columns you wish to see. So it seems to me you can not have an evenly sized 5 columns going into 12 due to the ratios; what I'm proposing in the code below involves giving each of the 5 intended columns width 2 and adding columns of width 1 to the far left and right to get to the 12 total. This would be something like

library(shiny)

st_box <- "margin: 0px 5px; border-radius: 25px; padding: 12px; box-sizing: border-box; border: 2px solid #F7941E; height: 169px; background-color: #ffffff; color: #444444;"
st_cent <- "margin: 0px 5px; border-radius: 25px; padding: 12px; box-sizing: border-box; border: 2px solid #ffffff; height: 169px; background-color: #79BDE8; color: #ffffff;"
box_content <- div(p("color bordered", br(), "box"), style = st_box)
central_box <- div(p("white bordered", br(), "central box"), style = st_cent)

ui <- fluidPage(
  fluidRow( # boxes row
    height = "185px",
    column(1),
    column(2, box_content),
    column(2, box_content),
    column(2, central_box),
    column(2, central_box),
    column(2, box_content),
    column(1)
  )
)

server <- function(input, output) { }
shinyApp(ui = ui, server = server)

If you want more control over your layouts you may wish to abandon the classic 12 column bootstrap approach supported by column() and do your layouts with css grid

Nir Graham0
Related