Shiny Dashboard inconsistent box and table formatting

Question

I've made a simple shiny dashboard with dummy tables below. When I run it and the window is too thin, the columns of the tables run over the edge of the boxes. If I make the window wide enough, the tables then fit in the boxes.

Can anyone help with a more consistent format? The solution could be to make the boxes and tables a fixed width, make the table column widths vary as the box width does, or something else.

At the bottom of the question are screenshots of each state for illustration.

ui.R

library(shinydashboard)
header <- dashboardHeader(title="Dashboard")
sidebar <- dashboardSidebar(sidebarMenuOutput("menu"))
body <- dashboardBody(
  tabItems(
    tabItem(tabName = "Home",
            fluidRow(
              column(width = 4,
                     box(title = "Column 1", width = NULL, solidHeader = TRUE,
                         tableOutput("Table1")),
                     box(
                       title = "Title 1", width = NULL, solidHeader = TRUE,
                       "Box content")
              ),
              column(width = 4,
                     box(
                       title = "Column 2", width = NULL, solidHeader = TRUE,
                       tableOutput("Table2"))
              ),
              column(width = 4,
                     box(title = "Column 2", width = NULL, solidHeader = TRUE),
                     box(title = "Title 3", width = NULL, solidHeader = TRUE)
              )
            )
    )
  )
)

dashboardPage(header, sidebar, body)

server.R

library(magrittr)
library(xtable)
col1 <- 1:10
col2 <- runif(10)
col3 <- "alphabet soup"
col4 <- c(TRUE, TRUE, FALSE, FALSE, TRUE)

Frame1 <- data.frame(col3, col1, col2, col4, col2, col3)
Frame2 <- data.frame(col3, col3, col3, col4)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Home", tabName = "Home", icon = icon("home"))
    )
  })
  output$Table1 <- renderTable({
    xtable(Frame1)
  })
  output$Table2 <- renderTable({
    xtable(Frame2)
  })
}

Thanks!

Answer 1

Adding this style fixed the problem for me.

in custom.css:

.content {
  overflow-y: auto;
}

and then included the style with a css file in shiny ui:

tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")

Answer 2

Here is a solution that works for the case above, but won't generalize well if the width of the table is highly variable. Basically, instead of using Shiny's functions for making rows you can write the HTML and set CSS properties to ensure that they have a minimum width.

A cleaner way to do it might be to find a way to edit the CSS on the table to make it fit better (perhaps using scrolling).

Note that I only implemented the fix for a couple columns. You'll need to reuses the code to apply to any other columns that need to have a minimum width.

library(shinydashboard)
library(xtable)
header <- dashboardHeader(title="Dashboard")
sidebar <- dashboardSidebar(sidebarMenuOutput("menu"))
body <- dashboardBody(
  tabItems(
    tabItem(tabName = "Home",
      fluidRow(
        HTML("<div class='col-sm-4' style='min-width: 400px !important;'>"),
          box(title = "Column 1", width = NULL, solidHeader = TRUE,
            tableOutput("Table1")),
          box(
            title = "Title 1", width = NULL, solidHeader = TRUE,
            "Box content"),
        HTML("</div>"),
        HTML("<div class='col-sm-4' style='min-width: 350px !important;'>"),
        box(
          title = "Column 2", width = NULL, solidHeader = TRUE,
          tableOutput("Table2")),
        HTML("</div>"),
        column(width = 4,
          box(title = "Column 2", width = NULL, solidHeader = TRUE),
          box(title = "Title 3", width = NULL, solidHeader = TRUE)
        )
      )
    )
  )
)

dashboardPage(header, sidebar, body)