Ионная карта не перемещается обратно в сторону веб-страницы

Question

Недавно я опубликовал несколько вопросов и не получил ответов.Я начинаю задаваться вопросом, был ли я в черном списке или что-то.Я попробую еще раз с новым вопросом.

Я работаю над приложением Ionic с видом на рабочий стол.Начальная страница, над которой я работаю, не является карточкой.У него просто есть список настроек.Однако, когда вы щелкаете по одной из настроек, карточка появляется в правой части экрана в отдельном столбце.Если я уменьшу размер окна, в какой-то момент карта окажется ниже списка настроек.

Проблема в том, что когда я снова увеличиваю размер экрана или даже увеличиваю его, карта остается ниже списка настроек,Это должно появиться снова на стороне списка настроек.Не знаю, как этого добиться.

Вот код:

<ion-header>
  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-list inset class="hovering">
            <ion-list-header><span class="settingsHeader">Settings</span> </ion-list-header>
            <button ion-item *ngFor="let item of items" (click)="itemTapped(item)" [ngClass]="{'highlightSelection': wasClicked}">
              <ion-icon name="create" item-left>
              </ion-icon>
              {{ item.label }}
            </button>  
          </ion-list>
        </ion-col>
        <ion-col *ngIf="this.addTable">
          <ion-list inset>
            <ion-list-header><span class="settingsHeader">{{ selectedItem.label }}</span>
              <button ion-button color="pm-yellow" (click)="addTapped($event, item)">Add</button>
              <button ion-button outline (click)="cancelTapped()">Cancel</button>
            </ion-list-header>
            <ion-card>
              <ion-card-content>
                <ngx-datatable #mydatatable class="ngx-datatable bootstrap material expandable" columnMode="flex" [headerHeight]="50" [footerHeight]="0" [rowHeight]="50" [scrollbarH]="false" [rowHeight]="50" [summaryRow]="false" [summaryPosition]="'bottom'" [loadingIndicator]="loading" [rows]="rows" [columns]="columns">
                  <div>
                    <ngx-datatable-column col-1 name="ID" [flexGrow]="1"></ngx-datatable-column>
                    <ngx-datatable-column col-2 name="Name" [flexGrow]="2">
                      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                        <span *ngIf="editRow != rowIndex">
                            {{ value }}
                        </span>
                        <input type="text"
                          autofocus
                          (blur)="updateValue($event, 'name')"
                          *ngIf="editRow === rowIndex"
                          [value]="value"
                        />
                      </ng-template>
                    </ngx-datatable-column>
                    <ngx-datatable-column name="Edit" prop="Edit" [flexGrow]="1">
                      <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
                        <span class="mobile-hidden"></span>
                      </ng-template>
                      <ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                        <span class="mobile-hidden button-spacing">
                          <button ion-button small *ngIf="editRow !== rowIndex" (click)="storeOldValues(rowIndex)">Edit</button>
                          <button ion-button small outline *ngIf="editRow !== rowIndex" (click)="deleteRow(rowIndex)">Delete</button>
                          <button ion-button small *ngIf="editRow === rowIndex" (click)="doneEditing(rowIndex, false)">Save</button>
                          <button ion-button outline small *ngIf="editRow === rowIndex" (click) = "doneEditing(rowIndex, true)">Cancel</button>
                        </span>
                      </ng-template>
                    </ngx-datatable-column>
                  </div>
                </ngx-datatable>
              </ion-card-content>
            </ion-card>
          </ion-list>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

Любая помощь приветствуется.

Answer 1

Я бы попробовал запустить content.resize() после изменения размера окна, как показано ниже.

Вы можете проверить, установив обработчик событий для изменения размера окна (не показано ниже).

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
 @ViewChild(Content) content: Content;

 callThisAfterReducingSizeOfWindow() {
   this.content.resize();
 }

}