Hello all,
I have a case where I long texts in dropdown and the widget not have the width enough. I would like to implement text-overflow: ellipsis;
I already tried many solutions without success.
For example this one:
[data-dropdown] > select.dropdown-display {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Someone have solution for this case?
Thanks in advance, Paulo Torres
Can you share an OML? or a link to look at the inspect?
You must follow until the span of the dropdown. If you click with the inspect, you will see the path to change the span.
EDIT:
Try this, please, because you are using the native version. I am afraid
.dropdown-container > div.dropdown-display, .dropdown-container > select.dropdown-display{
padding-right: var(--space-l);
I would advise you to use the custom option of the dropdown
I hardcoded the values on the dom, and the options are a bit weird. Maybe it is just because I changed the value on the dom. Ps: this didn't happen with Custom.
div.dropdown-display-content > span{
padding-right: var(--space-base)
For the items in the dropdown is the same
Hello Márcio,
It seems not working for me, maybe I'm doing something wrong, no?
This solution it was my workaround, there is no ellipsis but with padding at least the text is not in the arrow place.
Sure, you must give padding with the width of at least the size of the chevron space
Better than nothing :D But we just need padding because the rest not works.
Thanks @Márcio Carvalho