[UI5] “Trancation” Issue in FlexBox

Recently in our product we are trying to fulfill some ACC and TRANS requirements. One requirement is the text should not be truncated. There are many ways to solve this problem and for some controls like Text, Label or Link the most simple solution is setting the property wrapping=”true”.

But last week one of my colleague came to me and told me this way does not work in their application. She tried to set the wrapping property of a link to true, but nothing happened. The link is still truncated.

What a werid problem! But then I found that, actually the link is not truncated. Because if a text is truncated, then it will end with “…”, so from what I see I think the the link does not wrap but exceed the form.

<f:SimpleForm
	layout="ResponsiveGridLayout"
	labelSpanL="12"
	labelSpanM="12"
	labelSpanS="12"
	emptySpanL="0"
	emptySpanM="0"
	emptySpanS="0">
	<Label text="CreatedBy"/>
	<f:content>
		<FlexBox
			direction="Column"
			alignItems="Start">
			<items>
				<Link
					text="{createdBy}"
					wrapping="true"
					visible="true" />
				<Text
					text="{createdBy}"
					wrapping="true"
					visible="false" />
			</items>
		</FlexBox>
	</f:content>
</f:SimpleForm>

From the code (a little editted by me) we could see in the form there is actually a FlexBox, which contains a Link and a Text. It is designed like this because if the field “createdBy” is an Email address the Link will be shown, otherwise show the Text. So maybe the FlexBox the the root cause of the issue?

Then I created a pure html page to simulate this page. To emphasize the issue I only keep the key css properties. And as you could see the long Email address exceed the box as we expected.

Then I edited the properties a bit and the issue could easily be found. After changing the property align-items to stretch everything looks good.

Then we got the answer, when the align-items property is set to start, the link’s width will be its content’s width. But if we set it as stretch, it will inherit its parent’s width. More about this property could be found here.

Things getting easier after knowing the cause. We just removed the property and everything works smoothly.