CODEWITHSUNDEEP
iosangularscrollviewnativescript
Tim
Tim

Reputation: 61

Nativescript Layout Incorrect for Out of View Content in iOS

I have been battling this issue for the past couple of days. Hopefully someone can see what I'm missing.

I have a view that displays a list nested inside a parent list. The parent list has header detail. For the content that is displayed initially, everything is correct. For the header information that is out of view, when scrolled into view, it is incorrect.

<ScrollView>
<FlexboxLayout flexDirection="column">
    <StackLayout *ngFor="let property of properties">
        <FlexboxLayout flexDirection="row">
            <FlexboxLayout flexDirection="column" alignContent="center" style="background-color: red;">
                <Label [text]="property.addressLine1"></Label>
                <Label [text]="formatCityStatePostalCode(property)"></Label>
            </FlexboxLayout>
        </FlexboxLayout>

        <StackLayout *ngFor="let action of property.actions">
            <Label style="padding-bottom: 30" [text]="action.title"></Label>
        </StackLayout>
    </StackLayout>
</FlexboxLayout>

I have tried using StackLayouts, GridLayouts and FlexboxLayouts and all produce the exact same result.

Display when both headers are in the initial view

You will notice the headers are identical.

When the second header is off screen, it looks like this.

Off screen header displayed

Upvotes: 3

Views: 447

Answers (1)

Ian MacDonald
Ian MacDonald

Reputation: 14000

I have experienced this before with views that are offscreen getting stretched to match their bottom with the bottom of the scrollview. If you colour the backgrounds of all of those labels (with 20% opacity), you'll notice the overlapping.

This can be resolved (temporarily?) by setting iosOverflowSafeArea="false" on generated elements within a ScrollView.

<ScrollView>
<FlexboxLayout flexDirection="column">
    <StackLayout *ngFor="let property of properties" iosOverflowSafeArea="false">
        <FlexboxLayout flexDirection="row">
            <FlexboxLayout flexDirection="column" alignContent="center" style="background-color: red;">
                <Label [text]="property.addressLine1"></Label>
                <Label [text]="formatCityStatePostalCode(property)"></Label>
            </FlexboxLayout>
        </FlexboxLayout>

        <StackLayout *ngFor="let action of property.actions" iosOverflowSafeArea="false">
            <Label style="padding-bottom: 30" [text]="action.title"></Label>
        </StackLayout>
    </StackLayout>
</FlexboxLayout>
</ScrollView>

Discussion was here: https://nativescriptcommunity.slack.com/archives/C0L9EEURY/p1539955914000100

Upvotes: 4

Related Questions