Set minimum / maximum width for box with shinydashboard [R]

Question

I am using shinydashboard to display some plots, which I am putting into boxes. What I'm finding is that with the default width, the boxes are too small when the app isn't maximised. If I change the width, then I can get them to be the right size when the app is opened, but then they are too big when the window is maximised, and look stretched, or at least unnecessarily big. This is because the width argument is dynamic, so responds to the screen size.

Ideally, I would like to retain this dynamic element, but set a minimum and maximum width for the box. If that is not possible, then I would like to set a fixed width.

Possibly this requires some css knowledge, which I lack!

Very stripped back example code:

library("shiny")
library("shinydashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody(
            fluidRow(
              box(width = 12)
              )
            )


ui <- dashboardPage(dashboardHeader(title = "Example"),
                sidebar,
                body
                )

server <- function(input, output) {
}

shinyApp(ui, server)

Florian Florian · Accepted Answer · 2018-11-28T13:21:15

My preference to tackle these kind of layout issues is usually to make use of Bootstrap's grid system. You could apply that to your example as shown in the code snippet below. Note that I added a second box to illustrate the behavior better, and you can play around with the class parameter to make it match your desired behavior. Hope this helps!

library("shiny")
library("shinydashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(
    div(class = "col-sm-12 col-md-6 col-lg-4",
    box(width = '100%', title= 'This is the first test box')
    ),
    div(class = "col-sm-12 col-md-6 col-lg-4",
        box(width = '100%', title= 'This is the second test box')
    )
  )
)


ui <- dashboardPage(dashboardHeader(title = "Example"),
                    sidebar,
                    body
)

server <- function(input, output) {
}

shinyApp(ui, server)

Set minimum / maximum width for box with shinydashboard [R]

1 Answers