选择显示所有项目的下拉列表
Selectize dropdown showing all items
我有一个我无法解决的小问题。我认为解决方案非常简单,而且我对 java 语言的了解不多。
这是一个小例子:
library(shiny)
ui <- (fluidPage(
sidebarLayout(
sidebarPanel(
selectInput("userInput","Select User", c(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21),
selected=1),
selectInput("LongInput", "Long Strings", c("This is a long long string that is long.",
"This is a long long string that is longer."))
),
# allows for long texts to not be wrapped, and sets width of drop-down
tags$head(
tags$style(HTML('
.selectize-input {
white-space: nowrap;
}
#LongInput + div>.selectize-dropdown{
width: 660px !important;
}
#userInput + div>.selectize-dropdown{
width: 357px !important; maxItems: 21;
}
'
)
)
)
)
))
server <- function(input, output, session) {}
shinyApp(ui, server)
当用户单击第一个 selectInput 以进行选择时,我不想显示列表的前七个元素,而是显示列表的所有元素。
谢谢
我认为 shinyWidgets
软件包是您所需要的。它有一个 pickerInput
将显示所有选项
#install.packages("shinyWidgets")
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
pickerInput("userInput", label = "Select User", choices = 1:21, options = list(style = "btn-primary")),
selectInput("LongInput", "Long Strings", c("This is a long long string that is long.",
"This is a long long string that is longer."))
),mainPanel()
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
您可以使用 css tags$style(type='text/css', ".selectize-dropdown-content {max-height: 1000px !important; }")
来做到这一点
像这样:
ui <- (fluidPage(
tags$style(type='text/css', ".selectize-dropdown-content {max-height: 1000px !important; }"),
sidebarLayout(
sidebarPanel(
selectInput("userInput","Select User", c(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21),
selected=1),
selectInput("LongInput", "Long Strings", c("This is a long long string that is long.",
"This is a long long string that is longer."))
),
# allows for long texts to not be wrapped, and sets width of drop-down
tags$head(
tags$style(HTML('
.selectize-input {
white-space: nowrap;
}
#LongInput + div>.selectize-dropdown{
width: 660px !important;
}
#userInput + div>.selectize-dropdown{
width: 357px !important; maxItems: 21;
}
'
)
)
)
)
))
你得到:
我有一个我无法解决的小问题。我认为解决方案非常简单,而且我对 java 语言的了解不多。 这是一个小例子:
library(shiny)
ui <- (fluidPage(
sidebarLayout(
sidebarPanel(
selectInput("userInput","Select User", c(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21),
selected=1),
selectInput("LongInput", "Long Strings", c("This is a long long string that is long.",
"This is a long long string that is longer."))
),
# allows for long texts to not be wrapped, and sets width of drop-down
tags$head(
tags$style(HTML('
.selectize-input {
white-space: nowrap;
}
#LongInput + div>.selectize-dropdown{
width: 660px !important;
}
#userInput + div>.selectize-dropdown{
width: 357px !important; maxItems: 21;
}
'
)
)
)
)
))
server <- function(input, output, session) {}
shinyApp(ui, server)
当用户单击第一个 selectInput 以进行选择时,我不想显示列表的前七个元素,而是显示列表的所有元素。 谢谢
我认为 shinyWidgets
软件包是您所需要的。它有一个 pickerInput
将显示所有选项
#install.packages("shinyWidgets")
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
pickerInput("userInput", label = "Select User", choices = 1:21, options = list(style = "btn-primary")),
selectInput("LongInput", "Long Strings", c("This is a long long string that is long.",
"This is a long long string that is longer."))
),mainPanel()
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
您可以使用 css tags$style(type='text/css', ".selectize-dropdown-content {max-height: 1000px !important; }")
来做到这一点
像这样:
ui <- (fluidPage(
tags$style(type='text/css', ".selectize-dropdown-content {max-height: 1000px !important; }"),
sidebarLayout(
sidebarPanel(
selectInput("userInput","Select User", c(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21),
selected=1),
selectInput("LongInput", "Long Strings", c("This is a long long string that is long.",
"This is a long long string that is longer."))
),
# allows for long texts to not be wrapped, and sets width of drop-down
tags$head(
tags$style(HTML('
.selectize-input {
white-space: nowrap;
}
#LongInput + div>.selectize-dropdown{
width: 660px !important;
}
#userInput + div>.selectize-dropdown{
width: 357px !important; maxItems: 21;
}
'
)
)
)
)
))
你得到: