I want to build a shiny app using bs4Dash
in a sidebar layout. The sidebar contains a drop-down selection menu containing items with long names. After opening the dropdown, I want the full project name to be visible, i.e. overflowing the body of the dashboard. By default, the name is clipped at the sidebar border (shiny::selectizeInput
), or the dropdown content is right-aligned with the sidebar border, and the beginning of the item name is on the left side of the screen (shinyWidgets::pickerInput
). < /p>
Here’s what the app looks like (updated December 16, 2022):
I tried to apply the solution as described by flexdashboard
here,
But can't get it to work.
thanks for your help!
Here is a reproducible example of my application:
# 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) )
My session information():
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
Try this CSS:
Right now
and