r闪亮的面板滚动条移动文本但不移动单选按钮

Question

我想有一个sidebarPanel有大量控制的一些输出的行为内嵌单选按钮控件的mainPanel 。 我希望能够通过滚动radioButton控件没有对向下滚动mainPanel 。 但是，我到目前为止尝试这样做的方式导致整个页面滚动，或者sidebarPanel滚动，但留下单选按钮（看起来非常奇怪）。 请注意，当我将radioButton窗口小部件保持垂直（ inline = FALSE ）时，不会发生这种情况。 下面的代码允许您更改是否显示inline开启或关闭的radioButton窗口小部件。

ui.R

library(shiny)
shinyUI(fluidPage(
  sidebarLayout(
    sidebarPanel(
      id = "tPanel",style = "overflow-y:scroll; max-height: 600px",
      uiOutput("RadioGrid2")),
    mainPanel(uiOutput("InlineChooser")) )
))

server.R

    library(shiny)
shinyServer(function(input, output) {
  #Data
  RowNames = LETTERS
  ColumnNames = c("1","2","3","4","5")

  #Define a function that creates rows of radio buttons
  RadioRow = function(label, opts){
    choices = as.list(1:length(opts))
    names(choices) = opts
    radioButtons(paste0("Row",label),label=label,choices=choices,selected=1, inline = input$InRows)}

  #Define a function that creates the radio grid
  RadioGrid = function(RowNames, ColumnNames){lapply(X = RowNames, FUN = RadioRow, opts = ColumnNames)}

  #define a reactive object to hold the radio grid
  WidgetGrid2 = reactive({RadioGrid(RowNames, ColumnNames)})

  #create the output object to display the grid
  output$RadioGrid2 = renderUI({tagList(WidgetGrid2())})

  #create output object to select whether to do inline or not
  output$InlineChooser = renderUI(radioButtons("InRows", label = "Put in rows?", choices = list("yes" = TRUE, "no" = FALSE), selected = TRUE))
})

如何设置它以便inline打开时滚动条工作？

Answer 1

当您在行中显示单选按钮时，它们具有CSS postion:relative因此设置postion:relative对于容器div有助于正确定位它们（​​而不是浮动）。 尝试这个：

library(shiny)

ui <- shinyUI(fluidPage(
  sidebarLayout(
    sidebarPanel(
      id = "tPanel",style = "overflow-y:scroll; max-height: 600px; position:relative;",
      uiOutput("RadioGrid2")),
    mainPanel(uiOutput("InlineChooser")) )
))

server <- shinyServer(function(input, output) {
  #Data
  RowNames = LETTERS
  ColumnNames = c("1","2","3","4","5")

  #Define a function that creates rows of radio buttons
  RadioRow = function(label, opts){
    choices = as.list(1:length(opts))
    names(choices) = opts
    radioButtons(paste0("Row",label),label=label,choices=choices,selected=1, inline = input$InRows)}

  #Define a function that creates the radio grid
  RadioGrid = function(RowNames, ColumnNames){lapply(X = RowNames, FUN = RadioRow, opts = ColumnNames)}

  #define a reactive object to hold the radio grid
  WidgetGrid2 = reactive({RadioGrid(RowNames, ColumnNames)})

  #create the output object to display the grid
  output$RadioGrid2 = renderUI({tagList(WidgetGrid2())})

  #create output object to select whether to do inline or not
  output$InlineChooser = renderUI(radioButtons("InRows", label = "Put in rows?", choices = list("yes" = TRUE, "no" = FALSE), selected = TRUE))
})

shinyApp(ui, server)