'How to isolate conditional panels from other conditional panels when axis scroll involves one panel and not the other?

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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source