Раскрывающийся список обрезается боковой панелью при использовании полосы прокрутки - PullRequest
Новая
       43

Раскрывающийся список обрезается боковой панелью при использовании полосы прокрутки

1 голос
/ 04 ноября 2019

Я использую полосу прокрутки для боковой панели в блестящем приложении, просто с помощью css height: 90vh; overflow-y: auto;. Затем возникает проблема, если я использую shinyWidgets::dropdown на боковой панели: если раскрывающаяся панель больше, чем боковая панель, то она обрезается боковой панелью (см. Прилагаемый рисунок).

Возможно, у меня естьрешение на JavaScript, но не простое, и я работаю в сотрудничестве с некоторыми коллегами, которым не нравится JavaScript и которым не нравится, когда я использую JavaScript (это усложняет обслуживание приложения). Есть ли решение CSS? Или простое решение JavaScript? 

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      style = "height: 90vh; overflow-y: auto;", 
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      dropdown(
        tags$h1("A very large dropdown"),
        label = "Open me!",
        width = "500px"
      ),
      sliderInput("bins2", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins3", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins4", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins5", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins6", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins7", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins8", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins9", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins10", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins11", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins12", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins13", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins14", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins15", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins16", "Number of bins:", min = 1, max = 50, value = 30)
    ),

    mainPanel(
      plotOutput("distPlot")
    )
  )
)


server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}

shinyApp(ui = ui, server = server)

enter image description here

РЕДАКТИРОВАТЬ

Вот JavaScriptРешение: 

js <- '
$(document).ready(function(){
  $("[id^=sw-content-]").on("shown", function(){
    $(".sidebar").css({"overflow-y": "visible"});
  }).on("hidden", function(){
    $(".sidebar").css({"overflow-y": "auto"});
  });
});
'
ui <- fluidPage(
  tags$head(tags$script(js)),
  sidebarLayout(
    sidebarPanel(
      class = "sidebar",
      style = "height: 90vh; overflow-y: auto;", 
      .......

Но я не уверен, что это не вызывает никаких других проблем. Если выпадающий список имеет большую высоту, мы больше не сможем прокрутить это решение.

Edit 2

Хмм ... наконец, возможно, решение JS подойдет. Мы можем прокрутить большую выпадающую панель с помощью главной полосы прокрутки:

enter image description here

...