如何将条件面板与其他条件面板隔离?
How to isolate conditional panels from other conditional panels?
我遇到了条件面板格式影响其他条件面板的问题。下面是可重现的代码,底部是更好地解释问题的图像。在这个代码派生的更完整的应用程序中,问题更加明显并且看起来很草率(在更完整的应用程序中,当用户沿着阴影栏(Well Panel)向右滚动时,用户点击了多个屏幕top 就在选项卡标签的下方,当用户向右滚动时,错位变得更加明显。
问题是:当用户向右滚动 Glide Controls / Well Panels 进行选择时,Well Panels(顶部带有单选按钮)开始与 table and/or 下面出现的图。当用户向右滚动时,错位变得更加明显。这种错位在这个可重现的示例中并不明显,但在更完整的应用程序中更为明显,这是因为顶部有多个“屏幕”或 Well 面板供用户滚动浏览,并且有数据 tables and/or 图表显示在主面板下方。
为了简单起见,本示例中删除了所有服务器代码(没有图,没有 tables),因为没有服务器代码问题仍然存在。
如果我注释掉其他条件面板(在可重现代码中标记为“###”),错位就会消失。那么我怎样才能使条件面板彼此独立,作为消除这种错位的一种方式呢?我愿意接受任何其他消除这种偏差的建议。
该应用程序的基本结构是用户沿着侧边栏面板进行“大选择”,并使用 Glide Controls/Well 面板等仅在选项卡标签下方的顶部栏进行更多“精细选择”轮播效果。
可重现代码:
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;")
)
)
)
),
### Deleting next line resolves the well panel issue ###
conditionalPanel(condition = "input.stratsView == 2",fluidRow(column(12, plotOutput("stratPlot"))))
),
### Deleting the following conditional panel also resolves the well panel issue ###
conditionalPanel(condition = "input.selectData == 'DnL balances'",
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;")
)
)
)
)
), # closes conditional panel
### Deleting the following conditional panel (or either checkbox... or selectize...) also resolves the well panel issue ###
conditionalPanel(condition = "input.selectData == 'Level 1 data'",
panel(
checkboxGroupInput(
inputId = "vars",
label = "Filter by (default view is all data):",
choices = c("Period", "MOB"),
selected = c("Period", "MOB"),
inline = TRUE),
selectizeGroupUI(
id = "my-filters",
params = list(Period = list(inputId = "Period", title = "Period:"),
MOB = list(inputId = "MOB", title = "MOB:"))
), # closes above selectize...
status = "primary"
)
) # closes conditional panel
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
实际上这与 .
是同一个问题
首次调用应用程序时,conditionalPanel
会显示很短的时间。
这会导致出现垂直滚动条并导致错位。
使用 style = "display: none;"
渲染 conditionalPanel
在启动时隐藏(在需要的地方),请留下大拇指或其他反馈 here。
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"),
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;")
)
)
)
),
### Deleting next line resolves the well panel issue ###
conditionalPanel(condition = "input.stratsView == 2", style = "display: none;", fluidRow(column(12, plotOutput("stratPlot"))))
),
### Deleting the following conditional panel also resolves the well panel 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;")
)
)
)
)
), # closes conditional panel
### Deleting the following conditional panel (or either checkbox... or selectize...) also resolves the well panel issue ###
conditionalPanel(condition = "input.selectData == 'Level 1 data'", style = "display: none;",
panel(
checkboxGroupInput(
inputId = "vars",
label = "Filter by (default view is all data):",
choices = c("Period", "MOB"),
selected = c("Period", "MOB"),
inline = TRUE),
selectizeGroupUI(
id = "my-filters",
params = list(Period = list(inputId = "Period", title = "Period:"),
MOB = list(inputId = "MOB", title = "MOB:"))
), # closes above selectize...
status = "primary"
)
) # closes conditional panel
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
我遇到了条件面板格式影响其他条件面板的问题。下面是可重现的代码,底部是更好地解释问题的图像。在这个代码派生的更完整的应用程序中,问题更加明显并且看起来很草率(在更完整的应用程序中,当用户沿着阴影栏(Well Panel)向右滚动时,用户点击了多个屏幕top 就在选项卡标签的下方,当用户向右滚动时,错位变得更加明显。
问题是:当用户向右滚动 Glide Controls / Well Panels 进行选择时,Well Panels(顶部带有单选按钮)开始与 table and/or 下面出现的图。当用户向右滚动时,错位变得更加明显。这种错位在这个可重现的示例中并不明显,但在更完整的应用程序中更为明显,这是因为顶部有多个“屏幕”或 Well 面板供用户滚动浏览,并且有数据 tables and/or 图表显示在主面板下方。
为了简单起见,本示例中删除了所有服务器代码(没有图,没有 tables),因为没有服务器代码问题仍然存在。
如果我注释掉其他条件面板(在可重现代码中标记为“###”),错位就会消失。那么我怎样才能使条件面板彼此独立,作为消除这种错位的一种方式呢?我愿意接受任何其他消除这种偏差的建议。
该应用程序的基本结构是用户沿着侧边栏面板进行“大选择”,并使用 Glide Controls/Well 面板等仅在选项卡标签下方的顶部栏进行更多“精细选择”轮播效果。
可重现代码:
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;")
)
)
)
),
### Deleting next line resolves the well panel issue ###
conditionalPanel(condition = "input.stratsView == 2",fluidRow(column(12, plotOutput("stratPlot"))))
),
### Deleting the following conditional panel also resolves the well panel issue ###
conditionalPanel(condition = "input.selectData == 'DnL balances'",
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;")
)
)
)
)
), # closes conditional panel
### Deleting the following conditional panel (or either checkbox... or selectize...) also resolves the well panel issue ###
conditionalPanel(condition = "input.selectData == 'Level 1 data'",
panel(
checkboxGroupInput(
inputId = "vars",
label = "Filter by (default view is all data):",
choices = c("Period", "MOB"),
selected = c("Period", "MOB"),
inline = TRUE),
selectizeGroupUI(
id = "my-filters",
params = list(Period = list(inputId = "Period", title = "Period:"),
MOB = list(inputId = "MOB", title = "MOB:"))
), # closes above selectize...
status = "primary"
)
) # closes conditional panel
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
实际上这与
首次调用应用程序时,conditionalPanel
会显示很短的时间。
这会导致出现垂直滚动条并导致错位。
使用 style = "display: none;"
渲染 conditionalPanel
在启动时隐藏(在需要的地方),请留下大拇指或其他反馈 here。
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"),
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;")
)
)
)
),
### Deleting next line resolves the well panel issue ###
conditionalPanel(condition = "input.stratsView == 2", style = "display: none;", fluidRow(column(12, plotOutput("stratPlot"))))
),
### Deleting the following conditional panel also resolves the well panel 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;")
)
)
)
)
), # closes conditional panel
### Deleting the following conditional panel (or either checkbox... or selectize...) also resolves the well panel issue ###
conditionalPanel(condition = "input.selectData == 'Level 1 data'", style = "display: none;",
panel(
checkboxGroupInput(
inputId = "vars",
label = "Filter by (default view is all data):",
choices = c("Period", "MOB"),
selected = c("Period", "MOB"),
inline = TRUE),
selectizeGroupUI(
id = "my-filters",
params = list(Period = list(inputId = "Period", title = "Period:"),
MOB = list(inputId = "MOB", title = "MOB:"))
), # closes above selectize...
status = "primary"
)
) # closes conditional panel
), id = "tabselected"
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)