2

How do I control the point at which responsive columns in a Shiny page (using bootstrap) give up on trying to put all 12 columns on one page and go into mobile phone mode?

I can reproduce my problem (but nowhere near as bad as my actual application) with this simple app. See how the right of the first two tables below has been obscured by the other tables. Basically, the desired behaviour is to put the three tables vertically in a single column at this screen width, but bootstrap will not do this until the screen width goes down another 100 pixels or so.

enter image description here


library(shiny)
library(DT)

ui <- fluidPage(
   fluidRow(
     column(4, DTOutput("t1")),
     column(4, DTOutput("t2")),
     column(4, DTOutput("t3"))
   )
)

my_cars <- mtcars[, 1:3]
names(my_cars) <- c("A longish name", "Another longish name", "A particularly long and annoying name I can't change")

server <- function(input, output) {
  output$t1 <-    DT::renderDataTable(my_cars, rownames = FALSE)
  output$t2 <-    DT::renderDataTable(my_cars, rownames = FALSE)
  output$t3 <-    DT::renderDataTable(my_cars, rownames = FALSE)


  }

# Run the application 
shinyApp(ui = ui, server = server)
Peter Ellis
  • 5,694
  • 30
  • 46

1 Answers1

1

Played around with it a little but. First tried implementing a solution found here,

Change bootstrap navbar collapse breakpoint without using LESS

Had little luck.

Then I tried the following and it seemed to work better. By default column() uses col-sm-x as the bootstrap class, switching this to col-md-x seemed to help.

library(shiny)
library(DT)

custom_column = function(...){
    tags$div(
      class = "col-md-4",
      ...
    )
}

ui <- fluidPage(
  fluidRow(
    custom_column(DTOutput("t1")),
    custom_column(DTOutput("t2")),
    custom_column(DTOutput("t3"))
  )
)

my_cars <- mtcars[, 1:3]
names(my_cars) <- c("A longish name", "Another longish name", "A particularly long and annoying name I can't change")

server <- function(input, output) {
  output$t1 <-    DT::renderDataTable(my_cars, rownames = FALSE)
  output$t2 <-    DT::renderDataTable(my_cars, rownames = FALSE)
  output$t3 <-    DT::renderDataTable(my_cars, rownames = FALSE)


}

# Run the application 
shinyApp(ui = ui, server = server)
Sada93
  • 2,785
  • 1
  • 10
  • 21
  • 1
    Thinks. For future reference, this solves my reproducible example directly but didn't help with my real world one until I upped the ante further and used "col-lg-4", which did the trick (not perfectly, but much earlier to respond with only partial overlap). – Peter Ellis Aug 03 '19 at 04:09