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")
)
)
)
)
Post a Comment for "Resize Absolute Panel And Text Inside It On Different Screens (desktop, Laptop, Mobile)"