R Shiny CSS：在具有多个绝对面板的应用程序中启用 x 和 y 方向的滚动
R Shiny CSS: Enable scrolling in the x and y direction in an application with several absolute panels
我有一个带有多个绝对面板的 R Shiny 应用程序。
完整的应用程序如下所示：
我希望用户能够在浏览器 window 太小无法一次查看所有面板的情况下沿 x 和 y 方向滚动。
这是呈现应用程序的代码：
library(dplyr)
library(shiny)
library(shinyjs)
library(leaflet)
ui <- shiny::navbarPage(
# Enable use of shinyjs tools
htmltools::div(
shinyjs::useShinyjs()
),
# Navbar Identification
id = "nav",
# Navbar position
position = "static-top",
# Test Tab
shiny::tabPanel(title = "Test",
value = "test-tab",
#-----PANEL 1-----
shinyjs::inlineCSS("#u-panel-1.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 2-----
shinyjs::inlineCSS("#u-panel-2.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-2",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 272,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 3-----
shinyjs::inlineCSS("#u-panel-3.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-3",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 263,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 4-----
shinyjs::inlineCSS("#u-panel-4.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-4",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 700,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 5-----
shinyjs::inlineCSS("#u-panel-5.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-5",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220),
#-----PANEL 6-----
shinyjs::inlineCSS("#u-panel-6.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #8ebfdb; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-6",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
bottom = "auto",
left = 55,
right = "auto",
height = 177,
width = 425),
#-----PANEL 7-----
shinyjs::inlineCSS("#u-panel-7.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #f4ac90; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-7",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
left = 489,
right = "auto",
bottom = "auto",
height = 177,
width = 640),
#-----MAP PANEL-----
shiny::absolutePanel(id = "u-map-panel",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 60,
left = 1138,
right = "auto",
bottom = "auto",
height = 526,
width = 552,
#-----RENDER MAP-----
shinyjs::inlineCSS("#my-map { border-style: solid; border-color: black; margin: 0px; border-width: 1px; }"),
leaflet::leafletOutput("my-map", width="100%", height="100%")
)
) # ** End test tab ** #
) # ** End UI function ** #
server <- function(input, output, session) {
#-----BASE MAP UI OUTPUT-----
output$`my-map` <- leaflet::renderLeaflet({
# Establish interactive map
interactiveMap <- leaflet::leaflet(options=leaflet::leafletOptions(minZoom = 4, zoomControl = TRUE, dragging = TRUE)) %>%
leaflet::addProviderTiles("CartoDB.Positron")
# Return result
return(interactiveMap)
})
} # ** End server function ** #
shiny::shinyApp(ui, server)
我搜索了几个论坛并尝试实施 CSS 来解决这个问题，但我似乎无法弄清楚。
非常感谢您的协助！
也许有更好的方法，但是如果您将 tabPanel 定义为具有固定的宽度和高度（对应于所有面板的总和）并将每个面板设置为 style = "position: absolute;" 当浏览器 window 太小时可以滚动。你还需要有一个固定宽度的navbar。
Here is the app running on shinyapps.io
library(shiny)
library(shinyjs)
library(leaflet)
ui <- shiny::navbarPage(
# Enable use of shinyjs tools
htmltools::div(
shinyjs::useShinyjs()
),
# Navbar Identification
id = "nav",
# Navbar position
position = "static-top",
# Test Tab
shiny::tabPanel(title = "Test", style = "width: 1690px;height: 720px;",
value = "test-tab",
#-----PANEL 1-----
shinyjs::inlineCSS(".navbar {width: 1690px;}"),
shinyjs::inlineCSS("#u-panel-1.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-1", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 2-----
shinyjs::inlineCSS("#u-panel-2.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-2", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 272,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 3-----
shinyjs::inlineCSS("#u-panel-3.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-3", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 263,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 4-----
shinyjs::inlineCSS("#u-panel-4.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-4", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 700,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 5-----
shinyjs::inlineCSS("#u-panel-5.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-5", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220),
#-----PANEL 6-----
shinyjs::inlineCSS("#u-panel-6.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #8ebfdb; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-6", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
bottom = "auto",
left = 55,
right = "auto",
height = 177,
width = 425),
#-----PANEL 7-----
shinyjs::inlineCSS("#u-panel-7.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #f4ac90; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-7", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
left = 489,
right = "auto",
bottom = "auto",
height = 177,
width = 640),
#-----MAP PANEL-----
shiny::absolutePanel(id = "u-map-panel", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 60,
left = 1138,
right = "auto",
bottom = "auto",
height = 526,
width = 552,
#-----RENDER MAP-----
shinyjs::inlineCSS("#my-map { border-style: solid; border-color: black; margin: 0px; border-width: 1px;}"),
leaflet::leafletOutput("my-map", width="100%", height="100%")
)
) # ** End test tab ** #
) # ** End UI function ** #
server <- function(input, output, session) {
#-----BASE MAP UI OUTPUT-----
output$`my-map` <- leaflet::renderLeaflet({
# Establish interactive map
interactiveMap <- leaflet::leaflet(options=leaflet::leafletOptions(minZoom = 4, zoomControl = TRUE, dragging = TRUE)) %>%
leaflet::addProviderTiles("CartoDB.Positron")
# Return result
return(interactiveMap)
})
} # ** End server function ** #
shiny::shinyApp(ui, server)
我有一个带有多个绝对面板的 R Shiny 应用程序。
完整的应用程序如下所示：
我希望用户能够在浏览器 window 太小无法一次查看所有面板的情况下沿 x 和 y 方向滚动。
这是呈现应用程序的代码：
library(dplyr)
library(shiny)
library(shinyjs)
library(leaflet)
ui <- shiny::navbarPage(
# Enable use of shinyjs tools
htmltools::div(
shinyjs::useShinyjs()
),
# Navbar Identification
id = "nav",
# Navbar position
position = "static-top",
# Test Tab
shiny::tabPanel(title = "Test",
value = "test-tab",
#-----PANEL 1-----
shinyjs::inlineCSS("#u-panel-1.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 2-----
shinyjs::inlineCSS("#u-panel-2.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-2",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 272,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 3-----
shinyjs::inlineCSS("#u-panel-3.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-3",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 263,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 4-----
shinyjs::inlineCSS("#u-panel-4.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-4",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 700,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 5-----
shinyjs::inlineCSS("#u-panel-5.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-5",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220),
#-----PANEL 6-----
shinyjs::inlineCSS("#u-panel-6.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #8ebfdb; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-6",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
bottom = "auto",
left = 55,
right = "auto",
height = 177,
width = 425),
#-----PANEL 7-----
shinyjs::inlineCSS("#u-panel-7.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #f4ac90; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "u-panel-7",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
left = 489,
right = "auto",
bottom = "auto",
height = 177,
width = 640),
#-----MAP PANEL-----
shiny::absolutePanel(id = "u-map-panel",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 60,
left = 1138,
right = "auto",
bottom = "auto",
height = 526,
width = 552,
#-----RENDER MAP-----
shinyjs::inlineCSS("#my-map { border-style: solid; border-color: black; margin: 0px; border-width: 1px; }"),
leaflet::leafletOutput("my-map", width="100%", height="100%")
)
) # ** End test tab ** #
) # ** End UI function ** #
server <- function(input, output, session) {
#-----BASE MAP UI OUTPUT-----
output$`my-map` <- leaflet::renderLeaflet({
# Establish interactive map
interactiveMap <- leaflet::leaflet(options=leaflet::leafletOptions(minZoom = 4, zoomControl = TRUE, dragging = TRUE)) %>%
leaflet::addProviderTiles("CartoDB.Positron")
# Return result
return(interactiveMap)
})
} # ** End server function ** #
shiny::shinyApp(ui, server)
我搜索了几个论坛并尝试实施 CSS 来解决这个问题，但我似乎无法弄清楚。
非常感谢您的协助！
也许有更好的方法，但是如果您将 tabPanel 定义为具有固定的宽度和高度（对应于所有面板的总和）并将每个面板设置为 style = "position: absolute;" 当浏览器 window 太小时可以滚动。你还需要有一个固定宽度的navbar。
Here is the app running on shinyapps.io
library(shiny)
library(shinyjs)
library(leaflet)
ui <- shiny::navbarPage(
# Enable use of shinyjs tools
htmltools::div(
shinyjs::useShinyjs()
),
# Navbar Identification
id = "nav",
# Navbar position
position = "static-top",
# Test Tab
shiny::tabPanel(title = "Test", style = "width: 1690px;height: 720px;",
value = "test-tab",
#-----PANEL 1-----
shinyjs::inlineCSS(".navbar {width: 1690px;}"),
shinyjs::inlineCSS("#u-panel-1.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-1", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 2-----
shinyjs::inlineCSS("#u-panel-2.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-2", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 272,
left = 55,
right = "auto",
bottom = "auto",
width = 200),
#-----PANEL 3-----
shinyjs::inlineCSS("#u-panel-3.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-3", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 263,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 4-----
shinyjs::inlineCSS("#u-panel-4.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-4", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 180,
left = 700,
right = "auto",
bottom = "auto",
width = 429,
height = 178),
#-----PANEL 5-----
shinyjs::inlineCSS("#u-panel-5.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-5", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220),
#-----PANEL 6-----
shinyjs::inlineCSS("#u-panel-6.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #8ebfdb; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-6", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
bottom = "auto",
left = 55,
right = "auto",
height = 177,
width = 425),
#-----PANEL 7-----
shinyjs::inlineCSS("#u-panel-7.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #f4ac90; border-style: solid; border-color: black; border-width: 1px;}"),
shiny::absolutePanel(id = "u-panel-7", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 594,
left = 489,
right = "auto",
bottom = "auto",
height = 177,
width = 640),
#-----MAP PANEL-----
shiny::absolutePanel(id = "u-map-panel", style = "position: absolute;",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 60,
left = 1138,
right = "auto",
bottom = "auto",
height = 526,
width = 552,
#-----RENDER MAP-----
shinyjs::inlineCSS("#my-map { border-style: solid; border-color: black; margin: 0px; border-width: 1px;}"),
leaflet::leafletOutput("my-map", width="100%", height="100%")
)
) # ** End test tab ** #
) # ** End UI function ** #
server <- function(input, output, session) {
#-----BASE MAP UI OUTPUT-----
output$`my-map` <- leaflet::renderLeaflet({
# Establish interactive map
interactiveMap <- leaflet::leaflet(options=leaflet::leafletOptions(minZoom = 4, zoomControl = TRUE, dragging = TRUE)) %>%
leaflet::addProviderTiles("CartoDB.Positron")
# Return result
return(interactiveMap)
})
} # ** End server function ** #
shiny::shinyApp(ui, server)