How to use scrollStrategy in MatDialog?

Question

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

dirbacke · Answer 1 · 2018-05-25T06:37:13.983

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

Not so... I want to scroll the whole dialog. Look at [the example](https://stackblitz.com/edit/angular-ss6wkf-zzzqdt) — constantant, May 25 '18 at 16:41
Please help me here https://stackoverflow.com/questions/59790584/why-i-cant-scroll-down-on-a-big-popup-dialog-in-angular?noredirect=1#comment105776607_59790584 — Hasani, Jan 20 '20 at 13:26
@constantant to scroll the whole dialog, put the outside the very outer div of your dialog. The scrollbar will still be on the dialog but imo it looks better that way so you scroll the dialog not scroll the page. — BeniaminoBaggins, Jun 01 '21 at 23:30

score 67 · Answer 2 · answered Apr 03 '19 at 21:52

67

I tried this way,

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

answered Apr 03 '19 at 21:52

AbdulRehman

946
9
16

2

Exactly what I wanted. Not clear on what the author wants. – Brant Unger Sep 07 '20 at 21:10

score 16 · Answer 3 · answered Apr 23 '19 at 04:07

16

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;  
}

answered Apr 23 '19 at 04:07

Jet Buque Matias

161
1
3

Make sure that pointer-events has !important if you don't scope the class more. But here is what I did, quite like yours: .cdk-overlay-container > .cdk-global-overlay-wrapper { overflow: auto; pointer-events: auto; }. But notice the scope of the cdk-overlay-container – Daniel Hair Sep 27 '20 at 14:42

Uliana Pavelko · Answer 4 · 2022-08-09T10:36:14.797

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

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

score 4 · Answer 5 · answered Mar 27 '19 at 10:58

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.

F.H. · Answer 6 · 2021-08-11T15:53:37.697

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.

score 1 · Answer 7 · answered Sep 23 '18 at 02:07

1

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;
}

answered Sep 23 '18 at 02:07

mewosic

465
2
7
11

I noticed the same thing. The `overflow: auto` piece allows it to scroll, and everything else forces it to fit better on the screen. – Grungondola Sep 26 '18 at 13:33
3

I know. I am an author of the code :) I would like to know how to implement the same behavior without the css modification. I hope you have noticed non-working background clicking which is a problem of this solution. – constantant Sep 27 '18 at 07:45
Another problem with this approach is that when trying open a dialog inside a dialog, it shows the second one outside the viewport. – Phelipe Rocha Dec 14 '18 at 20:49
Related to this, please take a look at https://stackoverflow.com/questions/65406048/remove-previous-mat-dialogs-css-from-dom – user5663970 Dec 22 '20 at 09:20

score 0 · Answer 8 · answered May 20 '21 at 09:24

0

Its enough to add the two attributes below.

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

answered May 20 '21 at 09:24

Ilker Cat

1,862
23
17

1

The backdrop clicking does not work in that case. Look at the initial example https://stackblitz.com/edit/angular-ss6wkf-zzzqdt?file=styles.css – constantant May 21 '21 at 08:26

score 0 · Answer 9 · answered Feb 23 '23 at 16:28

0

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

answered Feb 23 '23 at 16:28

Michele

1

M Komaei · Answer 10 · 2022-01-30T12:53:14.980

-2

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

edited Jan 30 '22 at 12:53

answered Jan 30 '22 at 12:46

M Komaei

7,006
2
28
34

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. – Tyler2P Mar 06 '22 at 16:20

How to use scrollStrategy in MatDialog?

10 Answers10

Linked