闪亮的R - 允许滚动条超过div而不是div

Question

我已经获得了多个输入的选项列表，我希望每个selectInput显示完整的选项。但是，它们仅显示在splitLayout div中。如何告诉select表单元素显示其他所有内容的下拉列表。

以下是我的源代码：

library(shiny)

app <- shinyApp(
  ui = fluidPage(fluidRow(h1('yo')),
                 fluidRow(
                   column(
                     4,
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     ),
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     ),
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     )

                   ),
                   column(
                     4,
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     ),
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     ),
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     )
                   ),
                   column(
                     4,
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     ),
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     ),
                     splitLayout(
                       cellWidths = c('50%', '25%', '25%'),
                       textInput('happy', label = 'mood'),
                       selectInput('letter', 'which', LETTERS),
                       selectInput('letter', 'what', letters)
                     )
                   )

                 )),

  server = function(input, output) {
  }
)

runApp(app)

Answer 1

这是使用div控制窗口小部件对齐的不同方法。这不会与choices框中的selectInput重叠。

library(shiny)

shinyApp(
  ui = fluidPage(fluidRow(h1('yo')),
                 fluidRow(
                   column(4,
                          div(style = "display:inline-block; width: 35%;",
                              textInput('happy', label = 'mood')),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'which', LETTERS)),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'what', letters))
                          ),

                   column(4,
                          div(style = "display:inline-block; width: 35%;",
                              textInput('happy', label = 'mood')),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'which', LETTERS)),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'what', letters))
                          ),

                   column(4,
                          div(style = "display:inline-block; width: 35%;",
                              textInput('happy', label = 'mood')),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'which', LETTERS)),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'what', letters))
                          )
                   ),

                 fluidRow(
                   column(4,
                          div(style = "display:inline-block; width: 35%;",
                              textInput('happy', label = 'mood')),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'which', LETTERS)),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'what', letters))
                   ),

                   column(4,
                          div(style = "display:inline-block; width: 35%;",
                              textInput('happy', label = 'mood')),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'which', LETTERS)),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'what', letters))
                   ),

                   column(4,
                          div(style = "display:inline-block; width: 35%;",
                              textInput('happy', label = 'mood')),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'which', LETTERS)),
                          div(style = "display:inline-block; width: 25%;",
                              selectInput('letter', 'what', letters))
                          )
                   )

                 ),

  server = function(input, output) {
  }
)

编辑：没有div的替代解决方案或任何样式选项。

另一种更简单的对齐小部件的方法是为每个框使用column，如下所示。

library(shiny)

shinyApp(
  ui = fluidPage(fluidRow(h1('yo')),
                 fluidRow(
                   column(2,
                          textInput('happy', label = 'mood')),
                   column(1,
                          selectInput('letter', 'which', LETTERS)),
                   column(1,
                          selectInput('letter', 'what', letters)),
                   column(2,
                          textInput('happy', label = 'mood')),
                   column(1,
                          selectInput('letter', 'which', LETTERS)),
                   column(1,
                          selectInput('letter', 'what', letters)),
                   column(2,
                          textInput('happy', label = 'mood')),
                   column(1,
                          selectInput('letter', 'which', LETTERS)),
                   column(1,
                          selectInput('letter', 'what', letters))
                   ),

                 fluidRow(
                   column(2,
                          textInput('happy', label = 'mood')),
                   column(1,
                          selectInput('letter', 'which', LETTERS)),
                   column(1,
                          selectInput('letter', 'what', letters)),
                   column(2,
                          textInput('happy', label = 'mood')),
                   column(1,
                          selectInput('letter', 'which', LETTERS)),
                   column(1,
                          selectInput('letter', 'what', letters)),
                   column(2,
                          textInput('happy', label = 'mood')),
                   column(1,
                          selectInput('letter', 'which', LETTERS)),
                   column(1,
                          selectInput('letter', 'what', letters))
                 )

                 ),

  server = function(input, output) {
  }
)