Resize text and icons inside absolute panel of shiny app when aspect ratio of browsers window is not 16:9

I have a shiny app with an absolute panel that appears in the middle of the screen when the application starts. In a previous question, thanks to the help of Stéphane Laurent, I managed to resize the absolute panel and the text inside it by using, for every element of my UI, the CSS units for width and height related to the viewport (respectively "vw" and "vh") and not the common "px".

This works perfectly when the aspect ratio of the screen remains almost the same (around 16:9), but when the window changes dimensions (for example is taller than wide) the panel resizes but not the text, with the consequence that it pushes other elements of the UI outside the absolute panel. Please check an example of this here.

Below there's a minimal reproducible example. Please try to resize the browser window to check this problem.

library(shiny)

ui <- fluidPage(
  
  absolutePanel(id = "initial_panel",
                fixed = TRUE,
                top = 0,
                left = 0,
                bottom = 0,
                right = 0,
                width = "34vw",
                height = "31.5vh",
                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 = 1
                  ),
                  column(width = 10,
                         align = "center",
                         tags$p(strong("AAAAAAA AAAAAA AAAAAA"),
                                style = "font-size: 2.8vh;")
                  ),
                  column(width = 1,
                         align = "right",
                         actionButton(inputId = "close_initial_panel",
                                      label = icon(name = "times",
                                                   lib = "font-awesome"),
                                      style = "font-size: 1.5vh;
                                                 padding: 0vh 0vh 0vh 0vh;
                                                 margin-top: -9px;
                                                 margin-right: -14px;
                                                 background-color: rgba(0, 0, 0, 0);")
                  )
                ),
                fluidRow(
                  column(width = 12,
                         align = "center",
                         tags$p("BBBBBB BBBBBB BBBBBBB BBBBBBBBBB BBBBBBBB BBBBBBB BBBBBBBB BBBBBBB BBBBBBBBBBB BBBBBB",
                                style = "font-size: 1.9vh;")
                  )
                ),
                
  div(style = "height: 5.7vh;"),
                
                fluidRow(
                  column(width = 4,
                         align = "center",
                         actionButton(inputId = "explore_amr_map",
                                      label = img(src = "world_icon.png",
                                                  width = "96%",
                                                  height = "95%",
                                                  align = "center"))
                  ),
                  column(width = 4,
                         align = "center",
                         actionButton(inputId = "fill_form2",
                                      label = img(src = "location-map_icon2.png",
                                                  height = "45%",
                                                  width = "45%",
                                                  align = "center"))
                  ),
                  column(width = 4,
                         align = "center",
                         NEWdownloadButton(outputId = "download_RESBANK2",
                                           label = img(src = "download_icon.png",
                                                       height = "54%",
                                                       width = "54%",
                                                       align = "center"))
                  )
                ),
                fluidRow(
                  column(width = 4,
                         align = "center",
                         tags$p(strong("CCC CC CCCCC CCCCCCCC CCCCC"),
                                style = "font-size: 1.3vh;")
                         
                  ),
                  column(width = 4,
                         align = "center",
                         tags$p(strong("EEEEE EEEEE EEEE EEEE"),
                                style = "font-size: 1.3vh;"),
                  ),
                  column(width = 4,
                         align = "center",
                         tags$p(strong("FFFFFFF FFFFFFFFFFFFF FFFFFFF"),
                                style = "font-size: 1.3vh;"),
                  )
                )
  )
  
)

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

shinyApp(ui, server)

This may represent a problem on smartphone, for example. Thanks for your help!

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.