CODEWITHSUNDEEP
angularangular-material
Always_a_learner
Always_a_learner

Reputation: 5055

angular material dialog is not responsive

I am using Angular material dialog below is code I have written to open dialog wherein I am passing configurations:

component.ts

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config
};

const dialogRef = this.dialog.open(
  DialogBoxComponent,
  dialogBoxSettings
);

I have passed width and height to dialog box but when I resize my browser window the dialog shifts to left side of window.

dialog-box.component.ts:

import { Component, Inject, OnInit,HostListener } from "@angular/core";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Subscription } from "rxjs/Subscription";

declare let jQuery: any;
@Component({
  selector: "dialog-box",
  templateUrl: "./dialog-box.component.html",
  styleUrls: ["./dialog-box.component.css"]
})
export class DialogBoxWidgetComponent implements OnInit {
  title: string = "Title";
  heading: string = "Heading";
  type: string = "userInput;";
  buttons: any;

  public dialogConfig: any;

  subscription: Subscription;

  constructor(
    public dialogRef: MatDialogRef<DialogBoxWidgetComponent>,
    @Inject(MAT_DIALOG_DATA) private data: any
  ) {}

  closeDialog() {
    jQuery(".close").trigger("click");
  }



  ngOnInit() {
    this.dialogConfig = this.data;
    this.title = this.dialogConfig.title;
    this.heading = this.dialogConfig.heading;
    this.type = this.dialogConfig.type;
    this.buttons = this.dialogConfig.buttons;
    jQuery(".cdk-overlay-container").css("z-index", 99999);
    jQuery(".mat-dialog-container").css({
      "border-radius": "7px"
    });
  }
}

dialog-box.component.html

<h1 matDialogTitle>{{title}}</h1>

<div (click)="closeDialog()" style="position: relative;">
    <button class="close" mat-dialog-close></button>
  </div>

<div mat-dialog-content>{{heading}}</div>
<div mat-dialog-actions *ngIf="type == 'userInput'">
      <button *ngFor="let item of buttons" [ngClass]="item.type=='button'?'mat-dialog-btn':'mat-dilalog-btn-link'" mat-button matDialogClose="{{item.value}}">{{item.name}}</button>
</div>

What is wrong with my implementation? If I do not give width and height to dialog then it adjust fine when I resize window.

Upvotes: 12

Views: 29588

Answers (6)

Hamid
Hamid

Reputation: 908

I've provided this workaround for my projects

export enum DIALOG_STYLE {
  'SMALL_DIALOG' = 'small-dynamic-dialog',
  'MEDIUM_DIALOG' = 'medium-dynamic-dialog',
  'LARGE_DIALOG' = 'large-dynamic-dialog',
  'EXTRA_LARGE_DIALOG' = 'extra-dynamic-dialog',
}

Usage examples:

this._matDialog.open(CreateAppComponent, {
                disableClose: true,
                hasBackdrop: true,
                panelClass: DIALOG_STYLE.SMALL_DIALOG,
            });

export class CustomTemplateComponent implements AfterViewInit {
    #dialogRef = inject(MatDialogRef<any>);

    ngAfterViewInit(): void {
        this.#dialogRef.removePanelClass(DIALOG_STYLE.EXTRA_LARGE_DIALOG);
        this.#dialogRef.addPanelClass(DIALOG_STYLE.SMALL_DIALOG);
    }
}

It's worth noting that I have a _dialogs.scss file that contains the below codes

.small-dynamic-dialog {
    width: 25vw;
    min-height: 25vh;
}

.medium-dynamic-dialog {
    width: 42vw;
}

.large-dynamic-dialog {
    width: 50vw;
}

.extra-dynamic-dialog {
    width: 80vw;
    min-height: 50vh;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .small-dynamic-dialog {
        width: 35vw;
    }

    .medium-dynamic-dialog {
        width: 64vw;
    }
}

@media (max-width: 992px) {
    .small-dynamic-dialog {
        width: 40vw;
    }

    .medium-dynamic-dialog {
        width: 64vw;
    }

    .large-dynamic-dialog {
        width: 70vw;
    }
}

@media (max-width: 768px) {
    .small-dynamic-dialog {
        width: 52vw;
    }

    .medium-dynamic-dialog {
        width: 85vw;
    }

    .large-dynamic-dialog {
        width: 85vw;
    }
}

@media (max-width: 576px) {
    .small-dynamic-dialog {
        width: 85vw;
    }

    .medium-dynamic-dialog {
        width: 90vw;
    }

    .large-dynamic-dialog {
        width: 90vw;
    }

    .extra-dynamic-dialog {
        width: 90vw;
    }
}

Upvotes: 0

Manprit Tiwari
Manprit Tiwari

Reputation: 21

Simply apply CSS media query in the global style file:

mat-dialog-container{
  max-width: 50%;
  margin: auto;
}
@media (max-width: 500px){
  mat-dialog-container{
    max-width: 80vw;
  }
}

Upvotes: 2

usersina
usersina

Reputation: 1783

I was using low utility classes in my case (tailwind), here's the solution I found:

let dialogRef = this.dialog.open(LiveEventModalComponent, {
  panelClass: ['md:w-3/5', 'w-full'],
  maxHeight: '85vh',
  data: {},
});

Upvotes: 3

Alireza Rezaei
Alireza Rezaei

Reputation: 86

I use paneClass and in styles.scss set my custom style. Remember that you have to set the maxWidth property in mat-dialog because when you don't set maxWidth, it uses the default value, and your maxWidth is 80vw.

const dialogRef = this.dialog.open(ErrorDialogComponent, {
  maxWidth: '500px',
  data: { errorText: message },
  panelClass: 'full-with-dialog',
});

in styles.scss:

 .full-with-dialog {
  position: relative;
  overflow: auto;
  width: 500px;

  @media (max-width: 568px) {
    width: 440px;
  }

  @media (max-width: 468px) {
    width: 340px;
  }

  @media (max-width: 368px) {
    width: 300px;
  }
}

Upvotes: 0

Praveen RL
Praveen RL

Reputation: 698

To achieve responsiveness, we can use panelClass in MatDialogconfig

Add the following in global style

.dialog-responsive {
    width: 40%;
}

@media only screen and (max-width: 760px) {
    .dialog-responsive {
        width: 100%;
    }
}

And include this class in your config where you want to open dialog

   let config: MatDialogConfig = {
      panelClass: "dialog-responsive"
    }
    let dialogRef = this.dialog.open(InviteStudentComponent, config);

Upvotes: 19

Lia
Lia

Reputation: 11982

you can try by adding margin: 0 auto; to your dialog setting:

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  margin: '0 auto',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config
};

Upvotes: 10

Related Questions