Hello again 
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
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
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)
Hi @plinnegan,
Sorry for getting back to you so late!
We’ve discussed this and consider it a bug. I can create a Jira issue and we’ll take care of it!.
I can’t tell you when it’s going to be implemented though…
