Shiny: how do I put boxes on the next line?

Currently, this is what my current setup looks like:

fluidRow(
  box(
    ...,
    width = 3,
    ...),
  box(
    ...,
    width = 3,
    ...)),

fluidRow(
  box(
    ...,
    width = 3,
    ...),
  box(
    ...,
    width = 3,
    ...))

The problem is that interestingly, fluidRow() messed up left margin/alignments of the boxes, but besides that, it works great. I just wished that they left a bit of room on the left as if fluidRow() was not present.

I also tried br() but the problem with this is that this does not force the boxes to be on the next line, but instead just leaves a bit of white space between the boxes, like in-line text with modular collision boundaries.

I also tried hr(), similar story as above.

Of course, I would like to keep the boxes' width, instead of filling a whole row up to 12. Changing their widths to 5, for example, so it would be two wider boxes per row would not make it very pleasing to the eye.

What are some tips/tricks you use to move the boxes below?

You may add some extra space to the left via css:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(dashboardHeader(),
                    dashboardSidebar(),
                    dashboardBody(
                      fluidRow(box(p(), width = 3),
                               box(p(), width = 3), style = "margin-left: 5px;"),
                      fluidRow(box(p(), width = 3),
                               box(p(), width = 3))
                    ))

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

shinyApp(ui, server)

As an alternative use column:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(dashboardHeader(),
                    dashboardSidebar(),
                    dashboardBody(fluidRow(
                      column(12,
                             box(div(), width = 3),
                             box(div(), width = 3)
                             ),
                      column(12,
                             box(div(), width = 3),
                             box(div(), width = 3)
                             )
                    )))

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

shinyApp(ui, server)

Also see:

https://shiny.rstudio.com/articles/layout-guide.html

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.