Can't scroll using Ionic and Angular Material

Question

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>

wickdninja · Accepted Answer · 2019-07-24 02:33:11Z

1

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

answered Jul 24, 2019 at 2:33

wickdninja

1,0491 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't scroll using Ionic and Angular Material

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related