Selecting overflow and setting it to hidden on the row component in UI builder does not truncate long text in the text component within the row. I provided a class in the text component inside a row and defined the style in an extension as:
But when I run it in Destkop preview or on my phone I get:
So two questions:
is the text overflow option (against a row) in UI Builder not working?
If I get around it using a style change in an extension am I doing something wrong where the effect is shown in UI Builder but not the desktop preview or phone preview?
The configuration I have setup for the demo is below. You can see the cell has the overflow property set to hidden. But the cell still has multi line displayed.
To remove the multiline. The following pictures show setting CSS class to rowoverflow and then the rowoverflow CSS extension, which displays only one line.
I have published the app with the extension and the overflow attribute for the cell set to hidden. But the app still shows multiline even though in UIBuilder it truncated the cell to only show one line.
Note placing the rowoverflow CSS in the text element instead of the cell element shows the ellipses and looks better, but, I put it in the cell element to keep it consistent with what seems to be not working when you set overflow → hidden attribute on the cell.
Thanks for the reply. Putting !important on white-space overrode the white-space break-space default style for a text element and gave me the result I was looking for in the app view. That will remind me to look at the code.
