Trouble with spacing/padding in shinydashboard

Question

I'm a first-time user of shinydashboard and I'm having trouble understanding how the padding works between boxes across charts on a page. For instance, the padding in the example below is quite messed up, and is an accurate representation of the issue I'm running into with my work:

How do I stretch the charts across (ideally setting the padding between the boxes to 0)?

Here's the code used to create the image above:

library(shinydashboard)

header <- dashboardHeader()

sidebar <- dashboardSidebar(
    sidebarMenu(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
      )
    )

body <- dashboardBody(
    fluidRow(
        column(
            width = 4,
        box(title = "Chart1",
                plotOutput("distPlot")
            )
        ),
        column(
            width = 6,
            tabBox(
                tabPanel(id = "tabBox1",
                         title = "Chart2",
                         plotOutput("distPlot2")
                         ),
                tabPanel(id = "tabBox2",
                         title = "Chart3",
                         plotOutput("distPlot3")
                         ),
                tabPanel(id = "tabBox3",
                         title = "Chart4",
                         plotOutput("distPlot4")
                         )
                )
            ),
        column(width = 2,
                     box(title = "Chart5",
                         plotOutput("distPlot5")
                         )
                     )
        )
    )

shinyApp(
    ui = dashboardPage(header, sidebar, body),
    server = function(input, output) {
      output$distPlot <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })

      output$distPlot2 <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })

      output$distPlot3 <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })

      output$distPlot4 <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })

      output$distPlot5 <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })
    }
)

Answer 1

You can do it by specifying the width of the boxes as well (to 12):

body <- dashboardBody(
  fluidRow(
    column(
      width = 4,
      box(title = "Chart1", width = 12,
          plotOutput("distPlot")
      )
    ),
    column(
      width = 6,
      tabBox(width = 12,
        tabPanel(id = "tabBox1",
                 title = "Chart2",
                 plotOutput("distPlot2")
        ),
        tabPanel(id = "tabBox2",
                 title = "Chart3",
                 plotOutput("distPlot3")
        ),
        tabPanel(id = "tabBox3",
                 title = "Chart4",
                 plotOutput("distPlot4")
        )
      )
    ),
    column(width = 2,
           box(title = "Chart5", width = 12,
               plotOutput("distPlot5")
           )
    )
  )
)