如何让 virtualSelectInput() 选项扩展到 bslib 侧边栏之外？

Question

打开下拉菜单后，我希望完整的项目名称可见，即溢出仪表板的主体。默认情况下，名称会在侧边栏边框处被剪切。

我很想发展我的前端技能，直到我可以自己解决这个问题。但目前我无法解决它，尽管看到类似的例子，如this one。

如果有一个解决方案并解释如何解决此类问题，我们将不胜感激。

library(shiny)
library(bslib)
library(shinyWidgets)

vec_long_items <- sapply(1:10, function(i) {
  paste(sample(letters, 100, replace = TRUE), collapse = "")
})

shinyApp(
  ui = page_sidebar(
    title = "Long items to select",
    sidebar = sidebar(
      virtualSelectInput(
        inputId = "in1", 
        label = "Input 1", 
        choices = vec_long_items, 
      ),
    ),
  ),
  server = function(input, output, session) {
    output$out_text <- renderTable(data.frame(items = vec_long_items))
  }
)

Answer 1

虚拟选择的元素显示在

dropbox-container

中，根据您当前的视图，它可以位于下拉列表的上方或下方。您可以覆盖这两个选择器的

css

属性

width

和

max-width

：

.vscomp-dropbox-container.pop-comp-wrapper.position-top,
.vscomp-dropbox-container.pop-comp-wrapper.position-bottom 
  {
    width: fit-content !important; /* make boxes fit their content */
    max-width: unset !important;   /* overwrite default max-width for larger boxes */
  }

然后我们需要一项额外的调整：

virtual-select

有一个

dropBoxWrapper

属性，它定义了渲染保管箱的父元素。默认设置为

self

，我们将其设置为

body

，即我们设置

dropboxWrapper = "body"

在

virtualSelectInput

。这使得

dropbox

不会受到侧边栏的限制。

library(shiny)
library(bslib)
library(shinyWidgets)

vec_long_items <- sapply(1:10, function(i) {
  paste(sample(letters, 100, replace = TRUE), collapse = "")
})

css <- "
.vscomp-dropbox-container.pop-comp-wrapper.position-top,
.vscomp-dropbox-container.pop-comp-wrapper.position-bottom 
  {
    width: fit-content !important; 
    max-width: unset !important;
  }"

shinyApp(
  ui = page_sidebar(
    title = "Long items to select",
    tags$head(
      tags$style(HTML(css))
    ),
    sidebar = sidebar(
      virtualSelectInput(
        inputId = "in1", 
        label = "Input 1", 
        choices = vec_long_items,
        dropboxWrapper = "body"
      ),
    )
  ),
  server = function(input, output, session) {
    output$out_text <- renderTable(data.frame(items = vec_long_items))
  }
)