I created a shiny app with a specific layout on my desktop computer that fits perfectly on the screen. However, when I run the app on my notebook, only the top left boxes are visible, making the app too large for the screen. Even after resizing with Ctrl-, a portion of the bottom row is still cut off. I plan to use this app as a feedback tool for study participants who may have different screen sizes. Is there a way to automatically adjust box sizes to fit any screen size? I thought about changing the height values from fixed (e.g., height = 300) to a percentage like 30%, but it didn't work. I looked through CSS-related questions but couldn't find a solution (my CSS knowledge is limited). Any ideas on how to solve this 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)