在顶部呈现Shiny Selectize下拉菜单

6

这是我 Shiny UI 的简化版。我的问题在于 SelectizeInput 中的下拉菜单被隐藏了。需要不停地向下滚动,有点繁琐。而且,它看起来并不太好。我已经尝试过修改 z-index 属性使其置于最前面,但未能成功。

这是我的代码:

library(shiny)
runApp(list(
  ui = fluidPage(
    tabsetPanel(id = "tabs",
                tabPanel("Search",
                         fluidRow(
                           column(12,
                                  inputPanel(
                                    selectizeInput("s1", h4("Select State:"),
                                                   choices = state.name),
                                    tags$head(tags$style(".selectize-control.single { width: 400px; z-index: 1; }")),
                                    dateInput("day", h4("Input Date:"), value = Sys.Date())
                                  )
                           )
                         )
                )
    )),
  server = function(input,output,session) 
    {

  })
)

基本上,我想让SelectizeInput菜单像DateInput日历一样显示在顶部。
感谢您的帮助!
卡洛斯
1个回答

8
您可以使用来自 selectize.js 库的选项https://github.com/brianreavis/selectize.js/blob/master/docs/usage.mddropdownParent可能是您正在寻找的内容:
library(shiny)
runApp(list(
  ui = fluidPage(
    tabsetPanel(id = "tabs",
                tabPanel("Search",
                         fluidRow(
                           column(12,
                                  inputPanel(
                                    selectizeInput("s1", h4("Select State:")
                                                   , options = list(dropdownParent = 'body')
                                                   , choices = state.name),
                                    tags$head(tags$style(".selectize-control.single { width: 400px; z-index: 1; }")),
                                    dateInput("day", h4("Input Date:"), value = Sys.Date())
                                  )
                           )
                         )
                )
    )),
  server = function(input,output,session) 
  {

  })
)

图片描述

或者你可以看看CSS和类似overflow属性的东西。请参见Dropdowns not extending in shiny tabPanel。所以在这种情况下使用:

tags$head(tags$style(".tab-content {overflow: visible;}")),

就算不起什么作用,溢出方法看起来确实可行。CSS没有发挥作用。 - Matthew Plourde
@MatthewPlourde 是的,溢出会起作用,但最好使用内置的selectize选项,将菜单作为“body”的子元素。 - jdharrison
哦,我明白了。我尝试将样式应用于wellpanel和select输入,但没有应用到选项卡面板。谢谢。 - Matthew Plourde
谢谢!那正是我所需要的 :) - Carlos

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接