Quantcast
Channel: Active questions tagged r - Stack Overflow
Viewing all articles
Browse latest Browse all 201839

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

$
0
0

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!


Viewing all articles
Browse latest Browse all 201839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>