如何调整 Shiny 仪表板的大小以适应不同的屏幕尺寸？

Question

I have a shiny app with this basic layout that I wrote on my desktop computer where it fits the screen perfectly. However, when running the app on my notebook it'll only show the top left boxes- so the app is way to big for the screen. Upon pressing Ctrl - it will obviously become smaller but still about a quarter of the bottom row is cut off and pressing Ctrl - again the app only fills half the screen. Now I want to provide this app as a feedback tool for my study participants and it's safe to assume they will access it from different sized screens aswell. So I was wondering if there was any way to automatically adjust the box sizes to the size of the screen, no matter its size. I came up with the idea that maybe the mistake was setting the box heights to a fixed value (ie height = 300), but my attempt of changing it to 30% revealed that that's not a thing you can do. I read over some CSS-related questions on this site aswell but didn't find anything that worked here either (I know very little CSS though, so I might have missed something there). Does anyone have an idea how to fix that issue?

library(shiny)
library(shinydashboard)

body <-  dashboardBody( tags$head(tags$style(HTML('
.box {margin-top: 2px;margin-left: 0px; margin-right: 0px; margin-bottom:2px;padding:-10px}
div {padding: 0 !important;}'
))),
fluidRow(
  box(      title = "Mediennutzung", background = "green", solidHeader = TRUE, height=300
            
  ),
  box(background = "green", title= "Verteilung", height = 300
  )
),

fluidRow(
  box(
    title = "Schlaf", width = 4, solidHeader = TRUE, status = "success",
    height= 350
  ),
  box(
    title = "Vergleich mit anderen", width = 5, solidHeader = TRUE, status = "success"
    , height= 350
  ),
  box(
    title = "Wohlbefinden", width = 3, solidHeader = TRUE, status = "success",
    "Ergebnis DASS und PMH, Einordnung, Vergleich mit der Stichprobe", height= 350
  )
),

fluidRow(
  box(
    width = 4, background = "green", title = "Warum ist das wichtig?",
     height= 135
  ),
  box(
    title = "Warum ist das wichtig?", width = 5, background = "green",
     height= 135
  ),
  box(
    title = "Warum ist das wichtig?",width = 3, background = "green",
     height= 135
  )
),

fluidRow(
  box(
    width = 4, background = "green", title= "Zusammenhang zur Mediennutzung",
    "Schlaf mag oder mag nicht mit der Mediennutzung zusammenhngen", height= 125
  ),
  box(
    title = "Zusammenhang zur Mediennutzung", width = 5, background = "green",
    "Mal gucken", height= 125
  ),
  box(
    title = "Zusammenhang zur Mediennutzung",width = 3, background = "green",
    "TBC", height= 125
  )
)
)




# here the actual app starts
ui <- dashboardPage(
  dashboardHeader(title = "Deine Ergebnisse"),
  dashboardSidebar(textInput(inputId = "Code", label= HTML("<b>Willkommen auf unserer Auswertungsseite! Bitte gib hier deinen persönlichen Code ein.</b><br><em>(Gross- oder Kleinschreibung ist egal) </em>"), placeholder= "z.B. 01ABAB01"),
                   actionButton (inputId = "Button", label = "Meine Ergebnisse anzeigen"),
                   box(width = 12, background= "blue", HTML(
                     "TEXT"))
  ),
  body)


server <- function(input, output) {}

shinyApp(ui=ui, server=server)

Answer 1

This solution might help you. I'm not very well versed in CSS so I don't think it is the most elegant way but it works. Try nesting your shinydashboard::box() 's in a div() with class that changes the size based on screensize.

div(class = "col-sm-12 col-md-12 col-lg-4",
    shinydashboard::box(width = 12,
                        title = "Left or Upper Box",
                        p("This box will be 4 wide on large screen, and 12 wide on medium and small screens")
    )
),
div(class = "col-sm-12 col-md-12 col-lg-8",
    shinydashboard::box(width = 12,
                        title = "Right or Lower Box",
                        p("This box will be 8 wide on large screen, and 12 wide on medium and small screens")
    )
),

The downside of this approach is that there is extra padding either side of the boxes. There will be a way to remove this with some better CSS I bet. NOTE that the widths within the boxes themselves should be 12 so that they fill the div() at all widths.