Nesting StackLayout inside ScrollView pushes elements out of view on Android


#1

I have the following code and it seems to work fine on IOS but not on Android. When I change the phone orientation or click on the TextView element, all of my elements are pushed out of the view, or disappear. Here is my code

<ActionBar title="Appointment" backgroundColor="#4E6172" color="white">
  <NavigationButton text="Back"></NavigationButton>
</ActionBar>
<ScrollView>
  <StackLayout>
    <StackLayout class="form" *ngIf="!hideMainForm">
      
      <StackLayout>
          <Label text="Topics" textWrap="true"></Label>
          <TextField 
            class="input input-rounded fa-icons" 
            hint="Select Topic &#xf13a;" 
            style="text-align: center;" 
            (tap)="onShowListPicker()" 
            editable="false" 
            [text]="selectedItemValue">
          </TextField>
      </StackLayout>

      <StackLayout>
          <Label text="Message" textWrap="true"></Label>
          <TextView  class="input input-rounded" hint="Enter your message" text="" editable="true"></TextView>
      </StackLayout>

      <StackLayout>
          <Label text="Date" textWrap="true"></Label>
          <TextField  class="input input-rounded" (tap)="onShowDatePicker()" hint="Select Date" text="" editable="true"></TextField>
      </StackLayout>

      <StackLayout>
          <Label text="Time" textWrap="true"></Label>
          <TextField  class="input input-rounded" (tap)="onShowTimePicker()" hint="Select Time" text="" editable="false"></TextField>
      </StackLayout>

    </StackLayout>
    
    <StackLayout *ngIf="showListPicker">
      
      <StackLayout>
          <Label text="Please Choose one of the following topics" textWrap="true"></Label>
      </StackLayout>
      
      <StackLayout class="hr-dark"></StackLayout>

      <StackLayout>
        <ListPicker [items]="items" [(ngModel)]="selectedItem"></ListPicker>
        <Button text="Done" (tap)="onHideListPicker()"></Button>
      </StackLayout>

    </StackLayout>


    <StackLayout *ngIf="showDatePicker">
      
      <StackLayout>
          <Label text="Select Date" textWrap="true"></Label>
      </StackLayout>
      
      <StackLayout class="hr-dark"></StackLayout>

      <StackLayout>
        <DatePicker></DatePicker>
        <Button text="Done" (tap)="onHideDatePicker()"></Button>
      </StackLayout>

    </StackLayout>


    <StackLayout *ngIf="showTimePicker">
      
      <StackLayout>
          <Label text="Select Time" textWrap="true"></Label>
      </StackLayout>
      
      <StackLayout class="hr-dark"></StackLayout>

      <StackLayout>
        <TimePicker></TimePicker>
        <Button text="Done" (tap)="onHideTimePicker()"></Button>
      </StackLayout>

    </StackLayout>

  </StackLayout>
</ScrollView>

I was trying to figure where is the problem, and apparently scrollview messes up when there are 2 nested StackLayouts inside of it.

<ScrollView>
  <StackLayout>
      <StackLayout>
          <Label text="hi" textWrap="true"></Label>
          <TextField hint="hello" text=""></TextField>
          
      </StackLayout>
  </StackLayout>
</ScrollView>

Elements also disappear when I click on the TextView or when I change the orientation of the phone. The problem seem to be only affecting Android.