Overflow ellipsis on SingleSelectField and other components

Hello again :wave:

Looking for some guidance on how to modify the overflow behaviour of the SingleSelectField and other components from the dhis2/ui library.

I know in general I need to set the following properties:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

However when I apply these styles to the div the text just expands and makes the SingleSelectField component wider.

Any help much appreciated!

Best,
Pete

2 Likes

@german @Gassim @dhis2-platform

1 Like

Hi @plinnegan!

We do not support modifying styles right now, but you could provide a “className” prop or wrap the component with an element with its own class name, which you can then use to create a selector to target the element you’d like to change. We’re discouraging this though as it’s quite brittle, the component’s internal structure could change anytime, and we don’t consider it a breaking change as it’s supposed to be an internal change.

If you think there are some specific styles missing or a certain use-case is not covered, you could create an issue in our Jira, so we can prioritize it and pick it up eventually.

What text are you talking about specifically in this case? The label or the options?

Cheers,
Jan-Gerke

3 Likes

Hi @JGSalomon!

Thanks for your response, my issue is that when I select a multi-select option that is wider than the width of the input, it changes the size of the input to be outside it’s container. See screenshot below. I will try and setup a JIRA ticket when I have time, but in general it would be nice to control the overflow in some way (besides the brittle className setup I have to use currently)

1 Like