I want to built a shiny app with bs4Dash
in sidebar layout. The sidebar contains a dropdown selection menu with items that have long names. Once I open the dropdown, I would like the full item name to be visible, i.e. overflowing the dashboard's body. The names are cut at the sidebar border by default (shiny::selectizeInput
) or the dropdown content is right-aligned to the sidebar border and the start of the item name is off-screen to the left (shinyWidgets::pickerInput
).
This is how the app looks (updated 2022-12-16):
I tried to apply the solution for a flexdashboard
described
here,
but could not get it working.
Thanks for your help!
Here is a reproducible example of my app:
# 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 sessionInfo():
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:
i.e.
and