当浏览器窗口的宽高比不是16:9时,调整闪亮应用程序绝对面板内的文本和图标的大小

我有一个带有绝对面板的闪亮应用程序,该应用程序启动时会出现在屏幕中间。在previous question中,由于Stéphane Laurent的帮助,我设法通过对UI的每个元素使用与以下内容相关的宽度和高度的CSS单位来调整绝对面板和其中的文本的大小:视口(分别是“ vw”和“ vh”),而不是普通的“ px”。

当屏幕的长宽比几乎保持不变时(16>),这是完美的选择,但是当窗口更改尺寸(例如,比宽高)时,面板会调整大小,但不会文本,其结果是将UI的其他元素推送到绝对面板之外。请检查此here的示例。

下面有一个最小的可复制示例。请尝试调整浏览器窗口的大小以检查此问题。

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);")
                  )
                ),fluidRow(
                  column(width = 12,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,actionButton(inputId = "explore_amr_map",label = img(src = "world_icon.png",width = "96%",height = "95%",align = "center"))
                  ),column(width = 4,actionButton(inputId = "fill_form2",label = img(src = "location-map_icon2.png",height = "45%",width = "45%",NEWdownloadButton(outputId = "download_RESBANK2",label = img(src = "download_icon.png",height = "54%",width = "54%",align = "center"))
                  )
                ),tags$p(strong("CCC CC CCCCC CCCCCCCC CCCCC"),style = "font-size: 1.3vh;")

                  ),tags$p(strong("EEEEE EEEEE EEEE EEEE"),style = "font-size: 1.3vh;"),),tags$p(strong("FFFFFFF FFFFFFFFFFFFF FFFFFFF"),)
                )
  )

)

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

}

shinyApp(ui,server)

例如,这可能代表智能手机上的问题。感谢您的帮助!

a610024739 回答:当浏览器窗口的宽高比不是16:9时,调整闪亮应用程序绝对面板内的文本和图标的大小

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3081417.html

大家都在问