Label in FlexboxLayout isn't sized correctly on iOS

Bit of a strange one.

<FlexboxLayout class="">
    <Image src="/?u=https%3A%2F%2Fplacehold.it%2F40x40" />
    <Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t u v w x" />
</FlexboxLayout>

<FlexboxLayout class="">
    <Image src="/?u=https%3A%2F%2Fplacehold.it%2F40x40" />
    <Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t u v w x y z 1" />
</FlexboxLayout>

The markup above produces this layout on iOS:

As you can see the first Label is cut off after "v". Add a couple more characters to the string and the Label wraps properly and the full string is displayed.

This was in the iPhone 7 simulator. Other screen sizes will work/break with different string lengths.

I have a demo project here showing the issue: https://github.com/3rror404/ns-flexbox-issue

┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.2.0           │ 3.2.0          │ Up to date  │
│ tns-core-modules │ 3.2.0           │ 3.2.0          │ Up to date  │
│ tns-android      │ 3.2.0           │ 3.2.0          │ Up to date  │
│ tns-ios          │ 3.2.0           │ 3.2.0          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

@3rror404

Hi @3rror404,
Thank you for the sample project.
I reviewed this case on my side and indeed there is a problem with the setting the correct dimensions for the Flexbox Layout, I was able to reproduce this case on iPhone 7 simulator as well as on Android device. We will investigate further this case and will provide additional info on it. The attached sample project is also tested with @next modules.
In the meantime, I would suggest using GridLayout as the main container. For example:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>

    <GridLayout rows="100 100" class="p-20">

        <FlexboxLayout rpw="0" class="">
            <Image src="/?u=https%3A%2F%2Fplacehold.it%2F40x40" />
            <Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t u v w x" />
        </FlexboxLayout>

        <FlexboxLayout row="1" class="">
            <Image src="/?u=https%3A%2F%2Fplacehold.it%2F40x40" />
            <Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t u v w x y z 1" />
        </FlexboxLayout>

    </GridLayout>
</Page>

chore: add ui tests app test page for #4834

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.

Navigation Menu

Repository navigation

Label in FlexboxLayout isn't sized correctly on iOS #4834

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Label in FlexboxLayout isn't sized correctly on iOS #4834

Description

Activity

tsonevn commented on Sep 18, 2017

lock commented on Oct 2, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions