css 闪亮的selectInput/pickerInput带有长名称的输入应溢出边栏

wvyml7n5 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(117)

我想用bs4Dash在侧边栏布局中构建一个闪亮的应用程序。侧边栏包含一个下拉菜单，其中的项目有很长的名称。一旦我打开下拉菜单，我希望完整的项目名称是可见的，例如，溢出 Jmeter 板的主体。默认情况下，名称在侧边栏边界处被剪切（shiny::selectizeInput），或者下拉内容与侧边栏边框右对齐，并且项目名称的开头在屏幕外靠左（shinyWidgets::pickerInput）。
这是应用程序的外观（更新日期：2022 - 12 - 16）：

我试图将该解决方案应用于描述为here的flexdashboard，但无法使其工作。
谢谢你的帮忙!
下面是我的应用程序的一个可复制示例：

# app.R
library(shiny)
library(bs4Dash)
library(shinyWidgets)

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

shinyApp(
  ui = dashboardPage(
    header = bs4DashNavbar(
      title = "Long items to select", disable = TRUE, controlbarIcon = NULL
    ),
    sidebar = bs4DashSidebar(
      skin = "white",
      shinyWidgets::pickerInput(
        inputId = "in1", label = "shinyWidgets::pickerInput", choices = vec_long_items
      ),
      shiny::selectInput(
        inputId = "in2", label = "shiny::selectInput", choices = vec_long_items
      )
    ),
    body = dashboardBody(tableOutput("out_text"))
  ),
  server = function(input, output, session) {
    output$out_text <- renderTable(data.frame(items = vec_long_items))
  },
  options = list(launch.browser = FALSE)
)

我的会话信息（）：

R version 4.1.0 (2021-05-18)
Platform: x86_64-w64-mingw32/x64 (64-bit)  
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=German_Switzerland.1252  LC_CTYPE=German_Switzerland.1252    LC_MONETARY=German_Switzerland.1252 LC_NUMERIC=C                        LC_TIME=German_Switzerland.1252

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base

other attached packages:
[1] bs4Dash_2.1.0 shiny_1.7.2

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.7         shinyWidgets_0.7.5 digest_0.6.29      later_1.3.0        mime_0.12          R6_2.5.1           lifecycle_1.0.2    xtable_1.8-4       jsonlite_1.8.0     magrittr_2.0.3
[11] cachem_1.0.6       rlang_1.0.5        cli_3.4.0          fontawesome_0.3.0  promises_1.2.0.1   jquerylib_0.1.4    bslib_0.4.0        ellipsis_0.3.2     tools_4.1.0        httpuv_1.6.5
[21] fastmap_1.1.0      compiler_4.1.0     memoise_2.0.1      htmltools_0.5.2    sass_0.4.2

css

来源：https://stackoverflow.com/questions/74812700/shiny-selectinput-pickerinput-with-long-names-should-overflow-sidebar

2条答案

按热度按时间

ryevplcw1#

试试这个css：

css <- ".main-sidebar, .main-sidebar .sidebar .os-viewport, .os-host-overflow, .os-host-overflow>.os-padding {overflow: visible !important;}"

即

body = dashboardBody(
      tags$head(
        tags$style(HTML(css))
      ),

以及

shinyWidgets::pickerInput(
        inputId = "in1", label = "shinyWidgets::pickerInput", choices = vec_long_items, 
        options = pickerOptions(dropdownAlignRight = TRUE)
      ),

赞(0）回复(0）举报 2022-12-20

de90aj5v2#

我发现pickerInput的一个CSS属性可以改进输出。按如下所示更改正文：

# ...
body = dashboardBody(
      tags$head(
        tags$style(HTML("
        .dropdown-menu.show {
          display: contents;
        }
      "))
      ),
      tableOutput("out_text")
    )
# ...

现在有一个滚动条来查看完整的元素。不是我想要的，但已经更好了。

我仍然在寻找一个“溢出解决方案”：-）

赞(0）回复(0）举报 2022-12-20

我来回答

css 闪亮的selectInput/pickerInput带有长名称的输入应溢出边栏

2条答案

相关问题

热门标签

最新问答