угловой модальный nativescript находится за вкладкой в ​​IOS - PullRequest
Новая
       7

угловой модальный nativescript находится за вкладкой в ​​IOS

0 голосов
/ 06 декабря 2018

Я использую tabview и в любой вкладке, используя модальное позиционирование внизу страницы.но моя нижняя часть макета скрывается за вкладкой в ​​ios.Кто-нибудь может предложить идею для преодоления этого?Я прикрепил скриншот моей страницы здесь Я ожидаю страницу, подобную этой, здесь Я прикрепил свой код,

my-events.component.html 

<GridLayout class="a-m-t-25">
  <StackLayout>
    <GridLayout row="*">
      <ListView class="cv-list" [items]="data" (itemTap)="onItemTap($event)">
        <ng-template let-item="item" let-i="index">
          <FlexboxLayout class="cv-list-item" alignItems="center">
            <StackLayout class="list-item-c">
              <FlexboxLayout flexDirection="column">
                <Label class="list-item-heading" [text]='item.name'></Label>
              </FlexboxLayout>
            </StackLayout>
          </FlexboxLayout>
        </ng-template>
      </ListView>
    </GridLayout>
  </StackLayout>
  <ns-modal *ngIf="showModal" [position]="'bottom'" (close)="showModal = false">
    <ns-event-attendance></ns-event-attendance>
  </ns-modal>
</GridLayout>

my-events.component.ts 

onItemTap(args) {
  this.showModal = true;
  console.log(args.index);
}

modal.component.html 

<GridLayout>
  <StackLayout (tap)="closeModal()" class="transparent-background"></StackLayout>
  <FlexboxLayout flexDirection="column" justifyContent="flex-end" >
    <StackLayout class="modal-container" (tap)="closeModal()"  >
      <FlexboxLayout  justifyContent="center" padding="20">
        <StackLayout  width="45" borderRadius="10" height="4" backgroundColor="#a9a9a9"></StackLayout>
      </FlexboxLayout>
      <StackLayout>
        <StackLayout borderColor="#DFE1E6" borderBottomWidth="1" padding="20">
          <FlexboxLayout flexDirection="column">
            <Label class="text-heading" text="Lake clean up"></Label>
            <Label class="list-item-sub" text="Tower park, Anna Nagar"></Label>
            <Label class="list-item-last" text="Thursday, November 5, 3:00 PM"></Label>
          </FlexboxLayout>
        </StackLayout>
        <StackLayout borderColor="#DFE1E6" borderBottomWidth="1" padding="20">
          <FlexboxLayout flexDirection="column">
            <Label class="text-normal" text="Role"></Label>
            <Label class="text-dull" text="Section Leader"></Label>
          </FlexboxLayout>
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </FlexboxLayout>
</GridLayout>

modal.component.ts 

closeModal() {
  console.log('coming in '); 
  this.close.emit(true);
}
...