Wrap text to new line for items in MultiSelectDropdown popup

[Stephen Roddewig]

Hello Team,

I need to find a way to wrap the text to a new line for items with titles that exceed the width of the MultiSelectComponent dropdown instead of the current truncation with ellipsis. I've searched the forums and documentation (and tried to manually override the overflow behavior with CSS) without success.

Thank you for your support!

[Kokila Poovendran]

Hi Stephen Roddewig,



Greetings from Syncfusion support!

We have thoroughly reviewed your request and are happy to provide you with a solution that addresses your requirement. We have overridden the CSS styles for the list items in the multiselect, allowing the text to wrap properly and ensuring the full content is visible.

Here's the code snippet that accomplishes this:

.e-dropdownbase .e-list-item {

  white-space: normal;

  text-indent: 0;

  padding-left: 16px;

  line-height: 30px;

}

 

To further assist you, we have created a sample application demonstrating the implementation of the custom styles. You can find the sample by following this link:

Sample : https://stackblitz.com/edit/react-ntjz1q-zqiqta?file=index.js,index.css,index.html