Как настроить размер блестящей панели мониторинга в соответствии с различными размерами экрана?

#css #r #shiny #shinydashboard

Вопрос:

У меня есть блестящее приложение с этим базовым макетом, которое я написал на своем настольном компьютере, где оно идеально подходит для экрана. Однако при запуске приложения на моем ноутбуке будут отображаться только верхние левые поля — так что приложение слишком велико для экрана. При нажатии Ctrl — он, очевидно, станет меньше, но все равно примерно четверть нижнего ряда будет отрезана, и при нажатии Ctrl — снова приложение заполнит только половину экрана. Теперь я хочу предоставить это приложение в качестве инструмента обратной связи для участников моего исследования, и можно с уверенностью предположить, что они также получат доступ к нему с экранов разного размера. Поэтому мне было интересно, есть ли какой-либо способ автоматически настроить размеры коробки в соответствии с размером экрана, независимо от его размера. Мне пришла в голову мысль, что, возможно, ошибка заключалась в том, что высота коробки была установлена на фиксированное значение (т. Е. высота = 300), но моя попытка изменить ее на 30% показала, что это не то, что вы можете сделать. Я также прочитал некоторые вопросы, связанные с CSS, на этом сайте, но также не нашел ничего, что работало бы здесь (хотя я очень мало знаю CSS, так что, возможно, я что-то там пропустил). У кого-нибудь есть идеи, как исправить эту проблему?

 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)