Mat Dialog not resizing on Browser Zoom

106 views Asked by At

I have a mat dialog that does resize responsively but doesn't resize on window zoom level change. If you look at the attached photos I have users that use different zoom levels on their browser causing many visibility issues.

Zoom level 90% works perfectly as you can see from the first photo. Zoom 100% and 125% and higher and we have problems.

Here is my code to open the dialog. I have tried many things in the console to change the height but nothing works

openDialog(model: BillingModel, title: string, formMode: string): void {
        let dialogRef = this.dialog.open(BillingModalComponent, {
            maxWidth: '96vw',
            minWidth: '25vw',
            width: '85vw',
            minHeight: '50vh',
            height: 'auto',
            hasBackdrop: true,
            backdropClass: 'bdrop',
            disableClose: true,
            panelClass: ['md:w-3/5', 'w-full'],
            autoFocus: false,
            data: {
                title: title,
                model: model,
                mode: formMode,
                vendorList: this.vendorList,
            },
        });

90%

100% 125%

0

There are 0 answers