Resize absolute panel and text inside it on different screens (Desktop, Laptop, Mobile)

问题

My shiny application has different absolute panels, but their appearance is different on different screens. In particular, I noticed that the size of the panel and the text inside it, usually present inside h() tags) are always the same, while some widget (as actionButtons) are automatically resized. Here is a minimal reproducible example with an absolutePanel that is supposed to appear in the middle of the screen:

library(shiny)

ui <- fluidPage(

  absolutePanel(id = "initial_panel",
                fixed = TRUE,
                top = 0,
                left = 0,
                bottom = 0,
                right = 0,
                width = 900,
                height = 450,
                style = "background-color: white;
                         opacity: 0.85;
                         padding: 20px 20px 20px 20px;
                         margin: auto;
                         border-radius: 5pt;
                         box-shadow: 0pt 0pt 6pt 0px rgba(61,59,61,0.48);
                         padding-bottom: 2mm;
                         padding-top: 1mm;",

                fluidRow(
                  column(width = 12,
                         align = "center",
                         h1(strong("Welcome!"))
                  )
                ),
                fluidRow(
                  column(width = 12,
                         align = "center",
                         h3("Some more text")
                  )
                ),

                br(),

                fluidRow(
                  column(width = 12,
                         align = "center",
                         actionButton(inputId = "explore",
                                      label = icon(name = "times",
                                                   class = "fa-2x",
                                                   lib = "font-awesome")
                         )
                  )
                )
  )

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

If from my desktop I switch to the laptop, this panel takes almost the 60% of the screen size (so it's too big). Any suggestion on how to deal with this?

Thanks!

回答1:

You can specify the width with the vw CSS unit and the height with the vh CSS unit. These units are percentages of the viewport width and the viewport height respectively. For example, width = "50vw" for 50% of the viewport width. Note that this also scales when the window is resized.

h1 and h3 have a fixed size. Instead, you can use a p tag and specify its CSS property font-size in vh units.

br is a line break, its height is the one of line-height. Instead of using a br(), you can use an empty div with the CSS property height given in vh units: div(style = "height: 2vh;").

  absolutePanel(id = "initial_panel",
                fixed = TRUE,
                top = 0,
                left = 0,
                bottom = 0,
                right = 0,
                width = "50vw",
                height = "50vh",
                style = "background-color: white;
                         opacity: 0.85;
                         padding: 20px 20px 20px 20px;
                         margin: auto;
                         border-radius: 5pt;
                         box-shadow: 0pt 0pt 6pt 0px rgba(61,59,61,0.48);
                         padding-bottom: 2mm;
                         padding-top: 1mm;",

                fluidRow(
                  column(width = 12,
                         align = "center",
                         tags$p(strong("Welcome!"), style = "font-size: 3vh;")
                  )
                ),
                fluidRow(
                  column(width = 12,
                         align = "center",
                         tags$p("Some more text", style = "font-size: 1vh;")
                  )
                ),

                div(style = "height: 2vh;"),

                fluidRow(
                  column(width = 12,
                         align = "center",
                         actionButton(inputId = "explore",
                                      label = icon(name = "times",
                                                   class = "fa-2x",
                                                   lib = "font-awesome")
                         )
                  )
                )
  )

来源：https://stackoverflow.com/questions/58880757/resize-absolute-panel-and-text-inside-it-on-different-screens-desktop-laptop

标签

html

css

Shiny

screen