当轴滚动涉及一个面板而不涉及另一个面板时，如何将条件面板与其他条件面板隔离开来？
How to isolate conditional panels from other conditional panels when axis scroll involves one panel and not the other?
在下面的可重现代码中，提供了两个主要条件面板：“分层”和“DnL 余额”。第一个呈现较小的数据table，其中没有自动引入滚动条，第二个呈现较大的数据table，其中引入了滚动条。
一个条件面板中的滚动条似乎正在影响另一个条件面板。我已经尝试使用 style = "display: none;" 进行寻址（基于昨天的相关 post），在此可重现代码中使用 ### 进行标记，但它使第二个条件面板没有 glide/well 面板top 除非用户调整 window 的大小，无论多么细微。昨天的 posted 解决方案工作正常，但该代码没有呈现数据 table。当引入数据 table 并产生滚动条时，问题就出现了。
有办法解决吗？可能是 hack，但即使对 window 的大小进行微小的自动调整也可能有所帮助？
底部的图片更好地解释了这个问题。
library(shiny)
library(shinyglide)
library(shinyjs)
library(shinyWidgets)
ui <-
fluidPage(
useShinyjs(),
tags$style(".glide-controls { position: absolute; top: 8px; right: 14px; width: 160px; }"),
titlePanel("Hello"),
sidebarLayout(
sidebarPanel(selectInput("selectData", h5(strong("Select data to view:")),choices = list("Stratification","DnL balances"),selected = "Stratification")),
mainPanel(
tabsetPanel(
tabPanel("Private data", value = 1,
div(style = "margin-top:10px"),
conditionalPanel(condition = "input.selectData == 'Stratification'",
fluidRow(
column(12,
glide(
custom_controls = div(class = "glide-controls", glideControls()),
screen(
wellPanel(
radioButtons(
inputId = 'groupStrats',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
screen(
wellPanel(
radioButtons(
inputId = 'stratsView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
)
)
),
fluidRow(tableOutput("mtCarsPart")),
conditionalPanel(condition = "input.stratsView == 2", style = "display: none;", fluidRow(column(12, plotOutput("stratPlot"))))
),
### comment out "style..." in line below to see the issue ###
conditionalPanel(condition = "input.selectData == 'DnL balances'", style = "display: none;",
fluidRow(
column(12,
glide(
custom_controls = div(class = "glide-controls", glideControls()),
screen(
wellPanel(
radioButtons(
inputId = 'groupBal',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
screen(
wellPanel(
radioButtons(
inputId = 'balView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
)
)
),
fluidRow(tableOutput("mtCarsFull"))
)
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {
output$mtCarsFull <- renderTable(mtcars)
output$mtCarsPart <- renderTable(mtcars[1:10,1:3])
}
shinyApp(ui, server)
编辑： dev-version 已经修复：
remotes::install_github("juba/shinyglide") 应该可以解决问题。
初步回答：
关于 shinyglide 的行为，我提出了一个问题 here。
使用library(DT)你可以避免导致垂直滚动条的长输出：
library(DT)
library(shiny)
library(shinyjs)
library(shinyglide)
library(shinyWidgets)
ui <- fluidPage(
useShinyjs(),
tags$style(".glide-controls { position: absolute; top: 8px; right: 14px; width: 160px; }"),
titlePanel("Hello"),
sidebarLayout(
sidebarPanel(selectInput("selectData", h5(strong("Select data to view:")), choices = list("Stratification","DnL balances"), selected = "Stratification")),
mainPanel(
tabsetPanel(
tabPanel("Private data", value = 1,
div(style = "margin-top:10px"),
fluidRow(
column(12,
conditionalPanel(condition = "input.selectData == 'Stratification'",
glide(
custom_controls = div(class = "glide-controls", glideControls()),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'groupStrats',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'stratsView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
),
DTOutput("mtCarsPart"),
conditionalPanel(condition = "input.stratsView == 2", style = "display: none;", fluidRow(column(12, plotOutput("stratPlot"))))
),
conditionalPanel(condition = "input.selectData == 'DnL balances'",
glide(
custom_controls = div(class = "glide-controls", glideControls()),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'groupBal',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'balView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
),
DTOutput("mtCarsFull")
)
)
)
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {
output$mtCarsFull <- renderDT(mtcars)
output$mtCarsPart <- renderDT(mtcars[1:10,1:3])
}
shinyApp(ui, server)
在下面的可重现代码中，提供了两个主要条件面板：“分层”和“DnL 余额”。第一个呈现较小的数据table，其中没有自动引入滚动条，第二个呈现较大的数据table，其中引入了滚动条。
一个条件面板中的滚动条似乎正在影响另一个条件面板。我已经尝试使用 style = "display: none;" 进行寻址（基于昨天的相关 post），在此可重现代码中使用 ### 进行标记，但它使第二个条件面板没有 glide/well 面板top 除非用户调整 window 的大小，无论多么细微。昨天的 posted 解决方案工作正常，但该代码没有呈现数据 table。当引入数据 table 并产生滚动条时，问题就出现了。
有办法解决吗？可能是 hack，但即使对 window 的大小进行微小的自动调整也可能有所帮助？
底部的图片更好地解释了这个问题。
library(shiny)
library(shinyglide)
library(shinyjs)
library(shinyWidgets)
ui <-
fluidPage(
useShinyjs(),
tags$style(".glide-controls { position: absolute; top: 8px; right: 14px; width: 160px; }"),
titlePanel("Hello"),
sidebarLayout(
sidebarPanel(selectInput("selectData", h5(strong("Select data to view:")),choices = list("Stratification","DnL balances"),selected = "Stratification")),
mainPanel(
tabsetPanel(
tabPanel("Private data", value = 1,
div(style = "margin-top:10px"),
conditionalPanel(condition = "input.selectData == 'Stratification'",
fluidRow(
column(12,
glide(
custom_controls = div(class = "glide-controls", glideControls()),
screen(
wellPanel(
radioButtons(
inputId = 'groupStrats',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
screen(
wellPanel(
radioButtons(
inputId = 'stratsView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
)
)
),
fluidRow(tableOutput("mtCarsPart")),
conditionalPanel(condition = "input.stratsView == 2", style = "display: none;", fluidRow(column(12, plotOutput("stratPlot"))))
),
### comment out "style..." in line below to see the issue ###
conditionalPanel(condition = "input.selectData == 'DnL balances'", style = "display: none;",
fluidRow(
column(12,
glide(
custom_controls = div(class = "glide-controls", glideControls()),
screen(
wellPanel(
radioButtons(
inputId = 'groupBal',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
screen(
wellPanel(
radioButtons(
inputId = 'balView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
)
)
),
fluidRow(tableOutput("mtCarsFull"))
)
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {
output$mtCarsFull <- renderTable(mtcars)
output$mtCarsPart <- renderTable(mtcars[1:10,1:3])
}
shinyApp(ui, server)
编辑： dev-version 已经修复：
remotes::install_github("juba/shinyglide") 应该可以解决问题。
初步回答：
关于 shinyglide 的行为，我提出了一个问题 here。
使用library(DT)你可以避免导致垂直滚动条的长输出：
library(DT)
library(shiny)
library(shinyjs)
library(shinyglide)
library(shinyWidgets)
ui <- fluidPage(
useShinyjs(),
tags$style(".glide-controls { position: absolute; top: 8px; right: 14px; width: 160px; }"),
titlePanel("Hello"),
sidebarLayout(
sidebarPanel(selectInput("selectData", h5(strong("Select data to view:")), choices = list("Stratification","DnL balances"), selected = "Stratification")),
mainPanel(
tabsetPanel(
tabPanel("Private data", value = 1,
div(style = "margin-top:10px"),
fluidRow(
column(12,
conditionalPanel(condition = "input.selectData == 'Stratification'",
glide(
custom_controls = div(class = "glide-controls", glideControls()),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'groupStrats',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'stratsView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
),
DTOutput("mtCarsPart"),
conditionalPanel(condition = "input.stratsView == 2", style = "display: none;", fluidRow(column(12, plotOutput("stratPlot"))))
),
conditionalPanel(condition = "input.selectData == 'DnL balances'",
glide(
custom_controls = div(class = "glide-controls", glideControls()),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'groupBal',
label = NULL,
choiceNames = c('Calendar period','MOB'),
choiceValues = c('Period','MOB'),
selected = 'Period',
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
),
shinyglide::screen(
wellPanel(
radioButtons(
inputId = 'balView',
label = NULL,
choices = list("Table view" = 1,"Plot view" = 2),
selected = 1,
inline = TRUE),
style = "padding-top: 12px; padding-bottom: 0px;")
)
),
DTOutput("mtCarsFull")
)
)
)
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {
output$mtCarsFull <- renderDT(mtcars)
output$mtCarsPart <- renderDT(mtcars[1:10,1:3])
}
shinyApp(ui, server)