CODEWITHSUNDEEP
angularangular-materialionic4
Jon Donnell
Jon Donnell

Reputation: 111

Can't scroll using Ionic and Angular Material

I'm new to Ionic and am using mat-vertical-stepper with a series of forms. I can't figure out why the content on the page will not scroll despite the content going off the page.

I've tried using overflow: auto/scroll in different places and adding ion-content but ion-content only causes the content to disappear(no error in the console).

Code is abbreviated to remove the forms and other extraneous html.

<mat-card style="min-height: 100%">
    <mat-card-content>
      <app-login (action)="toggleComponents($event)" *ngIf="action === 'login'; else register"></app-login>
      <ng-template #register>
        <ion-content>
        <app-register (action)="toggleComponents($event)"></app-register>
      </ion-content>
      </ng-template>
    </mat-card-content>
</mat-card>

Below is the app-register component:

<mat-vertical-stepper linear="false" #stepper fxLayout="column">
  <mat-step>
    <ng-template matStepLabel>Form One</ng-template>
    <form>...</form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Form Two</ng-template>
    <form>...</form>
  </mat-step>
</mat-vertical-stepper>

Upvotes: 0

Views: 454

Answers (1)

wickdninja
wickdninja

Reputation: 1039

I haven't tested this but I have a hunch it's an issue with the composition of ion-content and the mat-card-content. I would make the ion-content the outtermost container element and embed the mat-card inside it.

<ion-content>
  <mat-card style="min-height: 100%">
    <mat-card-content>
      <app-login (action)="toggleComponents($event)" *ngIf="action === 'login'; else register"></app-login>
      <ng-template #register>
        <app-register (action)="toggleComponents($event)"></app-register>
      </ng-template>
    </mat-card-content>
  </mat-card>
</ion-content>

Also checkout the ionic docs for the ion-content here: https://ionicframework.com/docs/api/content and the docs on the ionic layout system here: https://ionicframework.com/docs/layout/structure

Upvotes: 1

Related Questions