CODEWITHSUNDEEP
rshinyshinydashboard
Jaccar
Jaccar

Reputation: 1844

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

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)

Upvotes: 6

Views: 3648

Answers (1)

Florian
Florian

Reputation: 25385

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)

Upvotes: 6

Related Questions