pickerInput choices alignment

[stephLH]

Hi, I test pickerInput with both shinydashboard and bs4Dash (which was recently supported Thanks!).

I use pickerInput with long text choices, so the frame width is extended to have full text visible.

My issue is that with shinydashboard, the choices text are left aligned, and with bs4Dash right aligned.
I guess it has to do with bootstrap 3 vs bootstrap 4.

I tried without success to use options dropdownAlignRight and data-dropdown-align-right with TRUE and FALSE (snapappointments/bootstrap-select#1127 (comment))

Would you have another solution to set alignment text ?

[stephLH]

Here is a code clarify the issue (devel versions of both shinyWidgets and bs4Dash) :

library(shiny)
library(bs4Dash)
library(shinyWidgets)

shinyApp(
  ui = bs4DashPage(
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      bs4SidebarMenuItem(
        shinyWidgets::pickerInput("filtre",
                                  "Filter", multiple = T, width = "100%",
                                  choices = "A very very very very very very very very very very very long text")
      )
    ),
    body = bs4DashBody()
  ),
  server = function(input, output) {}
)

Maybe it's related to bs4Dash ?

[pvictor]

Hi,
dropdown-align-right options works for me, but don't solve th issue, it is a priori complicated to display elements that exceed the dimensions of the sidebar in {bs4dash}. An alternative is to insert break lines into your choices :

library(shiny)
library(bs4Dash)
library(shinyWidgets)

my_choices <- c(
  "Choice 1 is small","Choice 2 is average sized",
  "But choice 3 is very  big and sometimes when the length of the qption is long it leaves the screen, so I need a UI fix to wrap the question to fit the width of the pickerInput. I want pickerInput because it has select all/deselect all button."
)
my_choices2 <- stringr::str_wrap(my_choices, width = 30)
my_choices2 <- stringr::str_replace_all(my_choices2, "\\n", "<br>")


shinyApp(
  ui = bs4DashPage(
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      bs4SidebarMenuItem(
        tags$div(
          style = "overflow: visible;",
          shinyWidgets::pickerInput(
            inputId = "filtre", 
            label = "Filter",
            multiple = TRUE, 
            width = "100%",
            choices = my_choices,
            options = list(`dropdown-align-right` = TRUE), 
            choicesOpt = list(
              content = my_choices2
            )
          )
        )
      )
    ),
    body = bs4DashBody()
  ),
  server = function(input, output) {}
)

See this SO post for more : https://stackoverflow.com/questions/51355878/how-to-text-wrap-choices-from-a-pickerinput-if-the-length-of-the-choices-are-lo/51406191#51406191

Victor

[stephLH]

Thank you Victor, I am going to use break lines

[Shivangi-Arora]

can we have close and update button like in screenshot