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

Question

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)

Answer 1

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)