shinyWidgets pickerInput width issue overflow off sidebar

Question

I am using shinyWidgets pickerInput within a flexdashboard sidebar. My issue is that when the options in the pickerInput are too wide they get cut off within the width of the sidebar which makes it so you cannot read the options, see which are selected, or see the deselect all button. Is there a way to have the pickerInput dropdown overflow off of the sidebar and onto the body of the page?

As an intermediate solution I have found that you can use:

choicesOpt = list(
      content = stringr::str_trunc(sort(unique(COLUMN_NAME)), width = 25))

To truncate the text in the pickerInput so that you are able to see which options are selected and all of the buttons but you are still not able to read each option fully.

Edit:

Adding reprex - Looking to have the filter drop down open over the body so that everything is visible.

---
title: "TEST"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    
---


```{r setup, include=FALSE}
library(dplyr)
library(shiny)
library(DT)
library(shinyWidgets)


Name <- c("LONNGGGGGGGGGGGGGGG TEXXTTTTTTTTTTTTTTTTTT", "Bill", "Maria", "Ben", "Tina")
Age <- c(23, 41, 32, 58, 26)

df <- data.frame(Name, Age)

```




Sidebar {.sidebar}
=======================================================================

### Filters

```{r}




pickerInput(
  inputId = "name",
  label = "test",
  choices = sort(unique(df$Name)),
  selected = sort(unique(df$Name)),
  multiple = TRUE,
  options = list(
    `actions-box` = TRUE,
     `selected-text-format` = paste0("count > ", length(sort(unique(df$Name))) -1),`count-selected-text` = "All Selected")
)

```


TEST
=======================================================================

Row 
-------------------------------------

```{r}
filtered_data <-
    reactive ({
      req(input$name)

      df %>%
        filter(Name %in% input$name) 

    })

renderDataTable(filtered_data(), class = 'cell-border stripe',
              extensions = 'Buttons',
              rownames = FALSE,
              options = list(
                columnDefs = list(list(className = 'dt-center',width = '100px', targets = "_all"))),fillContainer=TRUE)
```

Answer 1

This may have unintended side effects but here's a workaround to force the picker dropdown to not get cutoff.

You can add your own css class to the Sidebar section inside the {} . I used .my-class as a placeholder. Then I inserted a css chunk and added .my-class to the .section.sidebar classes from flexdashboard. If you don't do that then that css will overwrite the class. Most likely because it's loaded afterwards.

Also in the reprex provided, for whatever reason the choices were the not the actual values but instead the level positions.

So I used sort(unique(Name)) instead of sort(unique(df$Name))

```{css, echo=FALSE}
.section.sidebar.my-class {
  overflow: visible;
  z-index: 10;
}
```

Sidebar {.sidebar .my-class}
=======================================================================

...

Option 2: Truncate choices

The above option works as long as the height of the sidebar does not exceed the height of the browser window. Ideally you want overflow-x: visible and overflow-y: scroll . However I'm not sure if that's possible on the same div with position fixed.

Instead you could truncate your options so they fit in the window. If you want more text to be displayed you can increase the width of the sidebar.

cs = sort(unique(Name)

pickerInput(
  inputId = "name",
  label = "test",
  choices = cs,
  selected = cs,
  multiple = TRUE,
  options = list(
    `actions-box` = TRUE,
     `selected-text-format` = paste0("count > ", length(sort(unique(df$Name))) -1),`count-selected-text` = "All Selected"
    ),
  choicesOpt = list(
    content = stringr::str_trunc(cs, width = 18)
  )
)