mat-dialog 没有填充屏幕 - Angular

Question

I have an image carousel inside a mat-dialog. It doesn't really matter what component I feed the mat-dialog. They never fill the screen so I don't think it's the specific component inside mat-dialog that's the issue.

I want it to fill the width 100% and height:auto to make the image fit correctly, but it doesn't seem to work and I have no idea why.

  openImageGalleryMobile(images) {
    const imageDialogRef = this.dialog.open(ImageCarouselComponent, {
      panelClass: "matdialogStyle",
      data: { images: images},
      height: 'auto',
      width: '100%',
    });

    imageDialogRef
      .afterClosed()
      .pipe(takeUntil(this.destroy))
      .subscribe(result => { });
  }

<div id="imageSlideshow">

  <ngb-carousel *ngIf="images">
    <ng-template ngbSlide *ngFor="let image of images">
      <img src='{{image}}' alt="Random first side">

    </ng-template>

  </ngb-carousel>



</div>

I tried adding .matdialogStyle as a new unaltered css class, but issue is still there. I tried setting the width to 100% from component css file or styles.css file using matdialogStyle css class, but it never updates. I appreciate the help!

Answer 1

Can you try :

{
  panelClass: "matdialogStyle",
  data: { images: images},
  height: 'auto',
  minWidth: '100%',
}

and you can add for height 100% :

minHeight: '100vh'