Horizontal ScrollView combined with TabView is unusable on iOS 10

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

iOS < 11

Please provide the following version numbers that your issue occurs with:

CLI: 4.2.2
Cross-platform modules: 4.2.0
Runtime(s): 4.2.0

Please tell us how to recreate the issue in as much detail as possible.

Issue can be reproduced by using a ScrollView with horizontal orientation, and placing that in a TabView. The contents of the ScrollView are squashed in the top of the ScrollView, leaving a room the height of the TabView empty.
I've created a Playground to showcase this, with the exact same code on a page with TabView, and a page without TabView: https://play.nativescript.org/?template=play-ng&id=gymmzp&v=2
The issue only occurs on devices/simulators with iOS older than 11!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Confirming this one as a reproducible issue - happens only on iOS 10 device/ simulator.

For anyone running into this same issue, I've found a workaround. Set the verticalAlignment of the view inside the horizontal ScrollView to top.

@Component({
  moduleId: module.id,
  selector: 'my-component',
  template: `<ScrollView orientation="horizontal" row="0">
               <StackLayout #contentView orientation="horizontal">
                 ...
               </StackLayout>
             </ScrollView>`
})
export class MyComponent {

  @ViewChild('contentView') public contentViewRef: ElementRef;

  public ngAfterViewInit(): void {
    this.contentViewRef.nativeElement.verticalAlignment = 'top';
  }
}

Navigation Menu

Repository navigation

Horizontal ScrollView combined with TabView is unusable on iOS 10 #6300

Tell us about the problem

Which platform(s) does your issue occur on?

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Horizontal ScrollView combined with TabView is unusable on iOS 10 #6300

Description

Tell us about the problem

Which platform(s) does your issue occur on?

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

Activity

NickIliev commented on Sep 27, 2018

Johanneke commented on Oct 17, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions