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

Solution 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: 20px20px20px20px;
                         margin: auto;
                         border-radius: 5pt;
                         box-shadow: 0pt0pt6pt0px 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")
                         )
                  )
                )
  )