Repository navigation
FlexboxLayout doesn't measure and layout properly long labels #3834
Description
The following case fails on iPhone 6 and Nexus 5 emulator:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<FlexboxLayout flexDirection="row" alignItems="flex-start" verticalAlignment="top" backgroundColor="yellow">
<Label text="txt" backgroundColor="#ffe4c4" class="date" width="80" flexShrink="0"></Label>
<FlexboxLayout flexDirection="column" flexShrink="1" backgroundColor="#7fffd4">
<Label text="There are many variations of passages of sssssss Lorem Ipsum available, but the majority have suffered alteration in some form!" textWrap="true" flexGrow="3"></Label>
<Label text="Subtitle..." textWrap="true" fontSize="10"></Label>
</FlexboxLayout>
</FlexboxLayout>
</Page>
The ' some form!' string is absent or clipped.
N.B. It looks like the first FB measures the second with some width, and then arranges the second with another smaller width, making the text in its Label wrap into an additional line, unforeseen during measure, wreaking havoc vertically in the the second FB layout.
Activity
erkanarslan commentedon Apr 20, 2018
I also have the same problem but couldn't find the reason until now. It seems that flexbox layout process has some problems. Here is the same element with flexbox layout and grid layout, respectively.
Some part of the labels are missing in the flexbox case. This issue is open for more than 1 year. This needs to be fixed.
manoldonev commentedon May 4, 2018
With NativeScript/tns-core-modules-widgets#121 and #5781 this will layout properly both on Android and iOS:
lock commentedon Aug 26, 2019
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.