CODEWITHSUNDEEP
angularscrolldialogangular-material
constantant
constantant

Reputation: 1278

How to use scrollStrategy in MatDialog?

I tried to make a scroll for a dialog in reposition strategy, but it doesn't work for me.

const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );

The full example

I expect that during scrolling the whole dialog(element .cdk-overlay-pane) will move

Almost right behavior

Upvotes: 54

Views: 133560

Answers (10)

Uliana Pavelko
Uliana Pavelko

Reputation: 2952

Had a similar issue. Found that this works with Angular 12 and above.

import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';

scrollStrategy: ScrollStrategy;

constructor(private readonly sso: ScrollStrategyOptions) {
   this.scrollStrategy = this.sso.noop(); // or close()/block()/reposition()
}

And pass it in to MatDialogConfig object as: (See docks ScrollStrategyOptions)

  const dialogRef = this.dialog.open(
    DialogOverviewExampleDialog, {scrollStrategy: this.scrollStrategy }
  );

This stackblitz helped me to understand my problem - ScrollStrategyOptions

Upvotes: 9

Michele Basile
Michele Basile

Reputation: 1

You should use mat-dialog-content selector in order to create a scrollable content container for the dialog.

https://next.material.angular.io/components/dialog/api#MatDialogContent

Upvotes: 0

willingdev
willingdev

Reputation: 9546

let dialogRef = this.matDialog.open(MyComponent, {
   height: '100%',
   autoFocus: false,
});

enter image description here

Upvotes: -1

F.H.
F.H.

Reputation: 1674

I was looking for a similar solution as OP. The trick in the provided example is to set overflow:auto on the .cdk-global-overlay-wrapper.

Add this css to your styles (not inside the dialog's css):

Altough there's a slight issue, without auto pointer-events scrolling does not work on current chrome version and with auto pointer-events, closing via backdrop click does not work. (will update if i find a solution)

.cdk-global-overlay-wrapper {
  overflow: auto;
  pointer-events: auto;  // needed for chrome but prevents backdrop click close
}

If you want to prevent scrolling on the back scenery i.e. parent component you could set overflow: hidden on the parent as long as the dialog is open.

.. just remove the scroll strategy from the example.

Upvotes: 3

Ilker Cat
Ilker Cat

Reputation: 1942

Its enough to add the two attributes below.

.cdk-global-overlay-wrapper {
  overflow: auto;
  pointer-events: auto;  
}

Upvotes: 0

Jet Buque Matias
Jet Buque Matias

Reputation: 181

Hi try to put this on your style.css or style.scss

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
  overflow: auto;
  pointer-events: auto;  
}

Upvotes: 18

AbdulRehman
AbdulRehman

Reputation: 1026

I tried this way,

const dialogRef = this.dialog.open(LoginModalComponent, {
      autoFocus: false,
      maxHeight: '90vh' //you can adjust the value as per your view
});

Upvotes: 74

Papa Mufflon
Papa Mufflon

Reputation: 20010

Since https://github.com/angular/material2/pull/11235, .mat-dialog-container got max-height: inherit which should solve your problem.

Setting maxHeight: window.innerHeight + 'px' on the dialog configuration prevents the dialog from growing bigger than the screen.

Upvotes: 4

mewosic
mewosic

Reputation: 485

compare all the files difference. there is extra css in style.css

.cdk-global-overlay-wrapper {
  pointer-events: auto;
  display: block;
  position: relative;
  overflow: auto;
  text-align: center;
}

.cdk-global-overlay-wrapper::before {
  content: '';
  display: inline-block;
  height: 100%;
  white-space: nowrap;
}

.cdk-overlay-pane {
  display: inline-block;
  position: relative;
  text-align: left;
  white-space: normal;
}

Upvotes: 1

dirbacke
dirbacke

Reputation: 3021

If you want to scroll the content of the dialog then you have to use the <mat-dialog-content> tag, or use the directive mat-dialog-content in your div element. In your example try the following instead:

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<mat-dialog-content> <!-- instead of your <div>  or use <div mat-dialog-content> -->
  <p>What's your favorite animal!!!!!!!</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal!!!!!!</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</mat-dialog-content> <!-- instead of your </div> -->
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

And now your dialog content should have a scroll on the side. Read more about the Scrollable content container of a dialog on:

https://material.angular.io/components/dialog/api#MatDialogContent

Upvotes: 90

Related Questions