我有一个带有绝对面板的闪亮应用程序,该应用程序启动时会出现在屏幕中间。在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)
例如,这可能代表智能手机上的问题。感谢您的帮助!