如何调整 Shiny Dashboard 的尺寸以适应不同的屏幕尺寸？

Question

我有一个闪亮的应用程序，它具有我在台式计算机上编写的基本布局，它非常适合屏幕。但是，当运行我的笔记本上的应用程序时，它只会显示左上角的框 - 因此该应用程序对于屏幕来说太大了。按 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)

Answer 1

此解决方案可能对您有所帮助。我不是很精通 CSS 所以我不认为这是最优雅的方式，但它有效。尝试将 shinydashboard::box() 嵌套在带有 class 的 div() 中，根据屏幕大小更改大小。

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

这种方法的缺点是框的两边都有额外的填充。我打赌会有更好的方法 CSS 来消除它。请注意，框内的宽度应为 12，以便它们填充所有宽度的 div()。

如何调整 Shiny Dashboard 的尺寸以适应不同的屏幕尺寸？

How to adjust a Shiny Dashboard's size to fit different screen sizes?

css

r

shiny

shinydashboard