CODEWITHSUNDEEP
angularscrolldialog
Yandiro
Yandiro

Reputation: 157

"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%';

Upvotes: 2

Views: 18427

Answers (3)

Muhammad Umar
Muhammad Umar

Reputation: 1649

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.

Upvotes: 0

WasiF
WasiF

Reputation: 28847

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%'
    })
  }

Upvotes: 4

TheUnreal
TheUnreal

Reputation: 24462

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.

Upvotes: 11

Related Questions