我有一个选项列表，用于多个输入，我希望每个 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)
最佳答案
这是使用 div 控制小部件对齐的另一种方法。这不会与 selectInput 框中的 choices 重叠。
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) {
}
)
关于css - Shiny 的 R - 允许滚动条在 div 之上而不是在 div 之内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46495439/