force selectInput to wrap text

We display long strings (paths) to be selected with selectInput() . We have the problem that the paths are too long to be shown entirely in Chrome (see screenshot). We have no issue in Firefox since it wraps words at '/'.

While we were able to force a word wrap in the selectize-dropdown element using the following code:

          selectInput(inputId = "relativepath",
                      label = "resource relativepath:",
                      choices = res$relativepath,
                      multiple = resourcemultiple),
          actionButton("load", "load selected data resource", icon("upload")),
          tags$style(    type = 'text/css',
                         ".selectize-input { word-wrap : break-word;}
                         .selectize-dropdown {word-wrap : break-word;} "

(a solution based on this stack overflow question: r - Prevent selectInput from wrapping text - Stack Overflow)

the word-wrap : break-words css declaration, does not work for the already selected strings/paths (in the selectize-input element). It would be important that it does. How to achieve it?


".selectize-input { word-wrap : break-word;}
 .selectize-input { word-break: break-word;}
 .selectize-dropdown {word-wrap : break-word;} "

Thank you a lot, this indeed fixed my problem. If you want to get a few points on stackoverflow for your answer here is the link to the same question I asked over there:

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.