'"Scrollable" mat dialog with component

All I found about scrolling the dialog is about the overlay, but it is to describe the behavion off the dialog, but I need to scroll the content inside of it that is NOT in the mat-content, for it is an entire component.

To open the dialog I am using:

const dialogRef = this.dialog.open(CadastroPessoaComponent, dialogConfig)

The dialog config is like this:

dialogConfig.width = '90%';

angularscrolldialog


Solution 1:[1]

Try and set the height of your dialogConfig to your desired dialog height.

It worked for me:

const dialogRef = this.dialog.open(CadastroPessoaComponent, {
   height: '300px'
}

It will add an overflow if the height of your component content will be higher than 300px.

For the full list of dialog configuration available, check the MatDialog API.

Solution 2:[2]

In case you, don't know how much height you need to set. You can:

  openDialog() {
    this.dialog.open(myComponent, {
      height: '100%'
    })
  }

if you want some padding between the dialog and your page borders. You should set height below 100%.

  openDialog() {
    this.dialog.open(myComponent, {
      height: '90%'
    })
  }

Solution 3:[3]

I'm late to the party but you can add scroll to mat dialogue box by add scrollStragey into the constructor.

import { Overlay } from '@angular/cdk/overlay'; import { AtStages2Component } from 'src/app/analytical-tools/at-stages2/at-stages2.component';

constructor(private overlay:Overlay)

   openDialog(): void {
const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open(AtStages2Component , {
  data: { name: this.name, animal: this.animal },
  autoFocus: false,
  scrollStrategy
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  this.animal = result;
});   }

Note: It will automatically take as much height as your component needs to but height and width will vary according to the component.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TheUnreal
Solution 2 WasiF
Solution 3 Muhammad Umar

Related Questions