Hi,
I'm using a Dropdown Search widget in my app and the text for each option is so long that I am cutting it down using the Substring function, otherwise the lines overlap and look very messy. However this means that when a user searches for an option, their search only checks the text that is visible and not the whole item. E.g. if a user searches for the last word in an option, it displays "no results found" since that word has been cut off.
Is there a way to limit how much text is displayed in the dropdown menu, but still search through the entire text?
Hi Johnny Taylor,
you can try this:
.dropdown-search-container {
position: relative;
}
.dropdown-search {
max-width: 200px; /* Adjust the maximum width as per your requirement */
overflow: hidden;
text-overflow: ellipsis;
.dropdown-search .dropdown-menu {
.dropdown-search .dropdown-menu .dropdown-item {
white-space: nowrap;
Thanks
Reemali.
Hi Reemali
That works, thank you!
Hi Johnny, could you provide a screenshot of your implementation and of what the dropdown looks like with the raw text, before using the substring function?
The dropdown should automatically crop the overflown text as shown in the screenshot below, unless you have a different implementation.
Hi Abed,
When I don't use the substring function, the options just overlap and are often unreadable. Most of the options are pretty long, and don't get automatically cropped. I unfortunately can't add a screenshot of the items since they are part of a client's dataset.