当前位置： 文江博客话题详情

当轴滚动涉及一个面板而不是另一个面板时，如何将条件面板与其他条件面板隔离？

发布于 2025-01-12 02:49:54 字数 4755 浏览 0 评论 0原文

在下面的可重现代码中，出现了两个主要条件面板：“分层”和“DnL 余额”。第一个展示了一个较小的数据表，其中没有自动引入滚动条，第二个展示了一个较大的数据表，其中引入了滚动条。

一个条件面板中的滚动条似乎正在影响另一条件面板。我尝试使用 style = "display: none;" （基于昨天的相关帖子）进行寻址，在此可重现的代码中用 ### 标记，但它使第二个条件面板没有滑行/除非用户调整窗口的大小，无论多么细微，否则面板都会穿过顶部。昨天发布的解决方案工作正常，但该代码没有呈现数据表。当引入数据表和由此产生的滚动条时，问题就显现出来了。

有办法解决这个问题吗？可能是一个黑客，但即使是对窗口大小的微小自动调整也可能有帮助？

底部的图片更好地解释了这个问题。

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)

输入图片此处描述

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

原文

In the below reproducible code, two main conditional panels are presented: "Stratification" and "DnL balances". The first presents a smaller data table where no scroll bars are automatically introduced, and the 2nd presents a larger data table where scroll bars are introduced.

The scroll bars in one conditional panel appear to be affecting the other conditional panel. I have tried addressing with style = "display: none;" (based on a related post yesterday), flagged with ### in this reproducible code, but it leaves the 2nd conditional panel without the glide/well panel across the top unless the user adjusts the size of the window, however minutely. Yesterday's posted solution worked fine, but that code didn't render a data table. When introducing a data table and resulting scroll bars, the issue manifests.

Is there a way to resolve this? May be a hack, but even a tiny automated adjustment to the size of the window may help?

The images at the bottom better explain the issue.

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)

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

吖咩 2025-01-19 02:49:54

编辑： 开发版本已经修复：
remotes::install_github("juba/shinyglide") 应该可以解决该问题。

初始答案：

关于shinyglide的行为，我在此处提交了一个问题。

使用 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)

Edit: The dev-version is already fixed:
remotes::install_github("juba/shinyglide") should resolve the issue.

Initial answer:

Regarding shinyglide's behaviour I filed an issue here.

Using library(DT) you could avoid the long output which leads to the vertical scrollbar:

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)
回复 原文
~没有更多了~

关于作者

拥有

暂无简介

文章
评论
745 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文