CODEWITHSUNDEEP
cssrshinyrstudioxtable
Eugene Brown
Eugene Brown

Reputation: 4362

Shiny Dashboard inconsistent box and table formatting

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)
  })
}

enter image description here enter image description here

Thanks!

Upvotes: 4

Views: 4307

Answers (2)

tamilyn
tamilyn

Reputation: 51

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")

Upvotes: 5

jrdnmdhl
jrdnmdhl

Reputation: 1955

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)

Upvotes: 4

Related Questions