page-router-outlet scrollview measuring issue

[tsonevn]

From @tobydeh on December 20, 2017 10:56

Im using page-router-outlet and any page with a ScrollView as the root element with a stack layout inside has a gap at the top which disappears after a few seconds then jumps up. Its something to do with the scrollview not being able to measure its height correctly. if wait until after the view has loaded then populate the list im iterating in *ngFor it doesn't happen.

The problem only occurs on iOS.

<ActionBar backgroundColor='#eaeaea'>
    <NavigationButton visibility="collapsed" ></NavigationButton>
    <ActionItem ios.position="left" android.position="left" (tap)="goBack()" [visibility]="this.routerExtensions.canGoBack() ? 'visible' : 'collapsed'">
        <Button class="fa" text="&#xf060;" ></Button>
    </ActionItem>
    <Image src="res://images/tree" height="45" ></Image>
    <ActionItem ios.position="right" android.position="right" (tap)="onFavouritesTap()">
        <Button class="fa" text="&#xf004;" ></Button>
    </ActionItem>
    <ActionItem ios.position="right" android.position="right" (tap)="onSearchTap()">
        <Button class="fa" text="&#xf002;" ></Button>
    </ActionItem>
</ActionBar>
<ScrollView orientation="vertical">
    <StackLayout>
        <AbsoluteLayout [class.odd]="odd" [class.even]="even" class='divider p-15' (tap)="onTap(item)" *ngFor="let item of categories; let odd = odd; let even = even;">
            <Image src="res://images/book-{{item.slug}}" height="90" class='book-icon m-t-15'></Image>
            <Label left="80" top="5" [text]="item" class='title'></Label>
            <Label left="80" top="30" text="180 recommendations" class='lead'></Label>
            <Label left="80" top="50" right="0" width="70%" textWrap="true" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"></Label>
        </AbsoluteLayout>
    </StackLayout>
</ScrollView>

Copied from original issue: NativeScript/NativeScript#5191

[bytesoverflow]

If i add another view above the scroll view it stops jumping. Wrapping the scrollview in stack layout doesn't work, it needs a child view above the scrollview.

<ActionBar backgroundColor='#eaeaea'>
    <NavigationButton visibility="collapsed" ></NavigationButton>
    <ActionItem ios.position="left" android.position="left" (tap)="goBack()" [visibility]="this.routerExtensions.canGoBack() ? 'visible' : 'collapsed'">
        <Button class="fa" text="&#xf060;" ></Button>
    </ActionItem>
    <Image src="res://images/tree" height="45" ></Image>
    <ActionItem ios.position="right" android.position="right" (tap)="onFavouritesTap()">
        <Button class="fa" text="&#xf004;" ></Button>
    </ActionItem>
    <ActionItem ios.position="right" android.position="right" (tap)="onSearchTap()">
        <Button class="fa" text="&#xf002;" ></Button>
    </ActionItem>
</ActionBar>
<StackLayout>
<Label text="test"></Label>
<ScrollView orientation="vertical">
    <StackLayout>
        <AbsoluteLayout [class.odd]="odd" [class.even]="even" class='divider p-15' (tap)="onTap(item)" *ngFor="let item of categories; let odd = odd; let even = even;">
            <Image src="res://images/book-{{item.slug}}" height="90" class='book-icon m-t-15'></Image>
            <Label left="80" top="5" [text]="item" class='title'></Label>
            <Label left="80" top="30" text="180 recommendations" class='lead'></Label>
            <Label left="80" top="50" right="0" width="70%" textWrap="true" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"></Label>
        </AbsoluteLayout>
    </StackLayout>
</ScrollView>
</StackLayout>

[tsonevn]

Hi @tobydeh,
Thank you for contacting us.
I tested your scenario while using the attached sample code, however, was unable to recreate an issue with the ScrollView measurement on both iOS and Android. For your convenience, I am attaching Gif files, which demonstrates how the project works on my side. I am also attaching a sample project. please review it and make the needed changes, which would help us to recreate the problem.

It would also help if you provide some info about your environment(CLI, modules, tns-ios, tns-android, nativescript-angular versions).


Archive.zip

[bytesoverflow]

I've updated the project to recreate the issue. For some reason it only happens on the device and not the simulator - it happens on both with my project.

The issue only relates to IOS and not Android.

Archive2.zip

[tsonevn]

Hi @tobydeh,
Thank you for the attaching the sample project with the changes.
I tested the case further and found that this issue is reproducible only on ios 11. For your convenience, I am attaching video, which demonstrates the issue.

For further info, please keep track on the issue.

ios-11-issue.zip

I've been having a similar issue in iOS with Angular. The problem is that the ScrollView for the start route initializes vertically centered. However when navigating to another page the behavior is fixed.

I tried wrapping the view's contents with a Page tag which fixes the issue for the start route only but it breaks the templates for NON-START routes, losing visibility of the content.

This is the template's code:

<ActionBar [title]="'setup.title' | translate" class="action-bar">
  <StackLayout class="action-bar-title">
    <Image src="~/images/cx-logo.png" width="84" height="18"></Image>
  </StackLayout>
</ActionBar>
<GridLayout [rows]="(online ? '*, 44' : '22, *, 44')">
  <network row="0" (changed)="onNetwork($event)"></network>
  <ScrollView [row]="(online ? '0' : '1')" left="0" top="0">
    <StackLayout>
      <title [title]="'setup.title' | translate"></title>
      <StackLayout class="divider m-b-15">
        <Label [text]="'login.section.changeLanguage' | translate"></Label>
      </StackLayout>
      <StackLayout class="form m-b-15">
        <GridLayout columns="85, *" rows="auto, *" class="input-field input-sides">
          <Label class="label" ios:paddingTop="5" verticalAlignment="center"
                 [text]="'login.section.language' | translate"
                 col="0"></Label>
          <SegmentedBar class="segmented-bar" col="1" [items]="tabs"
                        (selectedIndexChange)="onSelectedLanguage($event)">
          </SegmentedBar>
        </GridLayout>
      </StackLayout>
      <StackLayout class="divider m-b-15">
        <GridLayout columns="*, 20" rows="*">
          <Label [text]="'login.section.server' | translate" col="0" row="1"></Label>
          <ActivityIndicator col="1" row="1" [busy]="testing" width="20" height="20"
                             class="activity-indicator"></ActivityIndicator>
        </GridLayout>
      </StackLayout>
      <StackLayout class="form">
        <GridLayout columns="85, *" rows="*, *, *" class="input-field input-sides">
          <Label class="label" [text]="'setup.labels.host' | translate" col="0" row="0"></Label>
          <TextField #hostTextField returnKeyType="next" (returnPress)="focusUser()" class="input"
                     [isEnabled]="!testing" keyboardType="url" autocorrect="false"
                     [enabled]="!testing && !saving" required #hostModel="ngModel"
                     [(ngModel)]="connection.server"
                     autocapitalizationType="none" col="1" row="0">
          </TextField>

          <Label class="label" [text]="'setup.labels.username' | translate" col="0" row="1"></Label>
          <TextField #userTextField returnKeyType="next" (returnPress)="focusPassword()" class="input"
                     autocorrect="false" autocapitalizationType="none" [enabled]="!testing && !saving"
                     required #usernameModel="ngModel" [(ngModel)]="credentials.username"
                     [isEnabled]="!testing" col="1"
                     row="1">
          </TextField>

          <Label class="label" [text]="'setup.labels.password' | translate" col="0" row="2"></Label>
          <TextField #passwordTextField returnKeyType="go" (returnPress)="onTest()" class="input"
                     autocorrect="false" autocapitalizationType="none" secure="true"
                     [enabled]="!testing && !saving" required #passwordModel="ngModel"
                     [(ngModel)]="credentials.password"
                     [isEnabled]="!testing" col="1" row="2"></TextField>
        </GridLayout>
        <StackLayout class="btn-container">
          <Button [text]="'login.test' | translate"
                  [isEnabled]="!testing && !saving && online && hostModel.valid && usernameModel.valid && passwordModel.valid"
                  (tap)="onTest()"
                  class="btn btn-primary btn-outline btn-block btn-rounded-lg btn-active"></Button>
        </StackLayout>
      </StackLayout>
      <StackLayout class="divider m-t-15 m-b-15">
        <Label [text]="'settings.store.changeLocation' | translate"></Label>
      </StackLayout>
      <StackLayout class="form">
        <GridLayout columns="85, *" rows="auto, *" class="input-field input-sides">
          <Label class="label" [text]="'login.location' | translate" col="0"></Label>
          <TextField class="input" autocorrect="false" autocapitalizationType="none" [(ngModel)]="tempLocation"
                     col="1"
                     editable="false"
                     [hint]="'placeholders.notSet' | translate"></TextField>
        </GridLayout>
        <StackLayout class="btn-container m-b-15">
          <Button [text]="'login.changeLocation' | translate" [isEnabled]="(online && tested)"
                  (tap)="changeLocation()"
                  class="btn btn-primary btn-outline btn-block btn-rounded-lg btn-active"></Button>
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </ScrollView>
  <StackLayout [row]="(online ? '1' : '2')" class="bar bar-footer">
    <Button class="btn btn-primary btn-block btn-full btn-fill btn-active" [text]="'buttons.save' | translate"
            (tap)="onSave()" [isEnabled]="(save && !saving)"></Button>
  </StackLayout>
</GridLayout>

[bytesoverflow]

Has there been any update on this? We need to resolve the issue before submitting our application to the App Store.