Обрезка дна ионного выхода в ng для ионной сетки и кнопки

Question

Разрабатываю мобильное приложение с использованием угловой ионной рамки.В этом я перечисляю группировку компонента в цикле и отображение в пользовательском интерфейсе.Но представление не показывает полную страницу.

Моя страница просмотра

   <ion-grid *ngFor="let dart of darts;let index = index; trackBy:trackByIndex;" scope="row">
      <ion-row>
        <ion-col>
          From Time: <input type='text' class="form-control" name='from-{{index}}' [(ngModel)]="dart.fromTime" />
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          To Time: <input type='text' class="form-control" #toTime='ngModel' name='toTime-{{index}}'
            [(ngModel)]=dart.toTime />
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Plan Task: <input type='text' class="form-control" #plannedTask='ngModel' name='plannedTask-{{index}}'
            [(ngModel)]=dart.plannedTask />
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Remarks: <input type='text' class="form-control" #remarks='ngModel' name='remarks-{{index}}'
            [(ngModel)]=dart.remarks />
        </ion-col>
      </ion-row>
      <hr />
    </ion-grid>
    <div class="form-group">
      <button class="btn btn-primary" type='submit'>Add Day Plan</button>
    </div>
  </form>
</ion-content>

Код компонента

  darts: Dart[] = [];

  ngOnInit() {
      const dart1 = new Dart('', '', '08:00 AM', '09:00 AM', '', '');
      const dart2 = new Dart('', '', '09:00 AM', '10:00 AM', '', '');
      const dart3 = new Dart('', '', '10:00 AM', '11:00 AM', '', '');
      const dart4 = new Dart('', '', '11:00 AM', '12:00 AM', '', '');
      const dart5 = new Dart('', '', '12:00 AM', '01:00 PM', '', '');
      const dart6 = new Dart('', '', '01:00 PM', '02:00 PM', '', '');
      const dart7 = new Dart('', '', '02:00 PM', '03:00 PM', '', '');
      const dart8 = new Dart('', '', '03:00 PM', '04:00 PM', '', '');
      const dart9 = new Dart('', '', '04:00 PM', '05:00 PM', '', '');
      const dart10 = new Dart('', '', '05:00 PM', '06:00 PM', '', '');
      const dart11 = new Dart('', '', '06:00 PM', '07:00 PM', '', '');

      this.darts.push(dart1);
      this.darts.push(dart2);
      this.darts.push(dart3);
      this.darts.push(dart4);
      this.darts.push(dart5);
      this.darts.push(dart6);
      this.darts.push(dart7);
      this.darts.push(dart8);
      this.darts.push(dart9);
      this.darts.push(dart10);
      this.darts.push(dart11);
  }
}

И вывод получен

В выводе я не могу просмотреть свою кнопку действия.Может ли кто-нибудь помочь мне решить эту проблему?

РЕДАКТИРОВАТЬ1: В последнем ряду, если я нажимаю вкладку из задачи плана, отображается полная страница, а сверху - текст, являющийся задачей плана.Я не понимаю этого.Может кто-то уточнить это.