在闪亮的selectInput中自定义下拉宽度 [英] Customize drop-down width in shiny selectInput

问题描述

下面的代码通过这个问题，可以防止下拉环绕文本，并设置所有下拉菜单的宽度。

有没有办法自定义下拉菜单的宽度？每个 selectInput ？

 库（闪亮）
 
 ui<  - （fluidPage（
 sidebarLayout（
 sidebarPanel（
 selectInput（userInput，Select User，c（1,2,3），
选择= 1），
 selectInput（LongInput，Long Strings，c（这是一个很长的长字符串，
这是一个很长的字符串， 。））
），
 
＃允许长文本不被打包，并设置下拉宽度
标签$ head（
 tags $ style （HTML（'
 .selectize-input {
白色空间：nowrap; 
} 
 .selectize-dropdown {
 width：660px！important; 
}'
）
）
）
）
））
 
服务器<  - 函数（输入，输出， session）{} 
 
 shinyApp（ui，server）
  

解决方案

如果我理解你的权利，你需要像

  library（shiny）
 
 ui<  - （fluidPage（
 sidebarLayout（
 sidebarPanel（
 selectInput（userInput，Select User，c（1,2,3），
 selected） = 1），
 selectInput（LongInput，Long Strings，c（这是一个很长的长字符串），
这是一个较长的长字符串。 ））
），
 
＃允许长文本不被打包，并设置下拉宽度
标签$ head（
 tags $ style（HTML （'
 .selectize-input {
 white-space：nowrap; 
 } 
 #LongInput + div> .selectize-dropdown {
 width：660px！important; 
} 
 #userInput + div> .selectize-dropdown {
 width：300px！important; 
} 
'
）
）
）
）
））
 
服务器<  -  function输入，输出，会话）{} 
 
 shinyApp（ui，server）
  

其为 LongInput 设置为660px，为 userInput

更新

你也可以做到疯狂
例如你有输入名称和大小的df

< pre $ df1 = data.frame（name = c（LongInput，userInput），px = c（600,300））
pre>

所以试试看

$ p $ library（shiny）

ui< - （fluidPage（
sidebarLayout（
sidebarPanel（
selectInput（userInput，Select User，c（1,2,3），
选择= 1），
selectInput（LongInput，Long Strings，c（这是一个很长的长字符串，
这是一个很长的字符串，它是l ））
），

uiOutput（din_css）

）
））

服务器< ;函数（输入，输出，会话）{
df1 = data.frame（name = c（LongInput，userInput），px = c（600,300））

输出$ din_css = renderUI（{
tags $ head（
tags $ style（HTML（paste0（'
.selectize-input {
white-space：nowrap;
''，
paste（apply（df1,1，function（i）{
paste0（＃，i [[name]]，+ div> .selectize- dropdown {
width：，i [[px]]，px！important;
}）
}）
，collapse ='/ n'））
）
）
）
}）
}

shinyApp（ui，server）


The code below, adopted from this question, prevents a drop-down from wrapping text, and sets the width of all of the drop-downs.

Is there a way to customize the width of the drop-down for each selectInput?

library(shiny)

ui <- (fluidPage(
  sidebarLayout(
    sidebarPanel(
      selectInput("userInput","Select User", c(1,2,3),
                  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;
                      }
                      .selectize-dropdown {
                      width: 660px !important;
                      }'
              )
            )
          )
        )
      ))

server <- function(input, output, session) {}

shinyApp(ui, server)

解决方案

If i understand your right you need something like

   library(shiny)

ui <- (fluidPage(
  sidebarLayout(
    sidebarPanel(
      selectInput("userInput","Select User", c(1,2,3),
                  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: 300px !important;
                      }
                      '
              )
      )
      )
      )
      ))

server <- function(input, output, session) {}

shinyApp(ui, server)

Its set 660px for LongInput and 300px for userInput

Update

you also can do it dunamic for example you have df with input name and size

df1=data.frame(name=c("LongInput","userInput"),px=c(600,300))

So try

library(shiny)

ui <- (fluidPage(
  sidebarLayout(
    sidebarPanel(
      selectInput("userInput","Select User", c(1,2,3),
                  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."))
    ),

    uiOutput("din_css")

      )
      ))

server <- function(input, output, session) {
  df1=data.frame(name=c("LongInput","userInput"),px=c(600,300))

output$din_css=renderUI({
    tags$head(
      tags$style(HTML(paste0('
                      .selectize-input {
                      white-space: nowrap;
                      }',
                      paste(apply(df1,1,function(i){
                           paste0("#",i[["name"]],"+ div>.selectize-dropdown{
                            width: ",i[["px"]],"px !important;
                           }")
                      })
                      ,collapse='/n')      )
      )
      )
    )
  })
}

shinyApp(ui, server)

这篇关于在闪亮的selectInput中自定义下拉宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！