plone / volto

React-based frontend for the Plone Content Management System
https://demo.plone.org/
MIT License
445 stars 600 forks source link

React Select field should gracefully handle multiline options #3024

Open arky opened 2 years ago

arky commented 2 years ago

Describe the bug Volto React-Select multiselect containers tend to stretch to accommodate all options text. There are no limits set on option width by default.

To Reproduce Steps to reproduce the behavior:

  1. Create a multi-select input container
  2. Add multiple selection option that span two or three lines (multi-line)
  3. When you render a edit form, the form will extend wide till the whole screen.

Expected behavior The multi-select option should trim the content with text-overflow ellipse

WorkAround Add stop gap CSS overrides

.react-select__multi-value__label{
    max-width: 35vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

Software (please complete the following information):

tiberiuichim commented 2 years ago

@arky this looks like a potential PR.