如何将条件面板与其他条件面板隔离?

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)