mat dialog dimensions not used in dialog?

[woven echo]

https://stackblitz.com/edit/bdmkin?file=src%2Fexample%2Fdialog-content-example.ts

hi,
I have a dialog which i set the dimensions in the .open method but when opening the dialog, i get this gap at the bottom as the mat-dialog-action is not at the bottom of the dialog container as shown in the picture & stackblitz.
even without the mat-dialog-action you have this gap as if 100% height isn't doing 100%.
is there another property that needs to be set for dialog component itself to be true 100% height? or is this something that needs to be manually fixed using ng-deep?

[compact orbit]

I ran into that. Let me look for what I did.

[compact orbit]

<h2 mat-dialog-title>Print Invoice</h2>
    <mat-dialog-content>
      Invoice for {{ data().customer }}<br>
      Amount {{ data().amounts.total }}<br>
      Invoice Date {{ data().invoice.issueddate | date }}<br><br>


      {{ message() }}
      <mat-dialog-actions align="center">
      <button mat-button  (click)="onPrint()">Just Print Invoice</button>
      </mat-dialog-actions>
      <mat-dialog-actions align="center">
      <button mat-button  (click)="onSetStatus()">Set Status to Sent and Print Invoice</button><br>
      </mat-dialog-actions>
    </mat-dialog-content>

I think you need to use the mat-dialog directives. iirc I was using a mat-card and trying to fill the space, and it didn't work for some reason.

[woven echo]

sorry for late reply.
mat-dialog directive? do you mean mat-dialog-content html tag?
i am using that in the stackblitz. unless there is some other directive i am missing?
still doesn't seem to 100% the height?

[woven echo]

would this perhaps be something i would need to manually change using ng-deep? or is there a better and proper way?

[woven echo]

seems quite odd that i would need to use ng-deep?

[lean canyon]

We usually have wrapper components and while calling from the parent component. We provide width/height in config to override dimensions

But from html I think inside you can use
Host Selector mat-dialog something to target element to apply styles instead of using ng-deep which may affect global some places.

[woven echo]

yes, but i think the problem exist despite using those config

    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
      enterAnimationDuration: '0ms',
    exitAnimationDuration: '0ms',
    width: '50%',
    height: '80%',
    maxWidth: '100%'
  });

[lean canyon]

const dialogRef = this.dialog.open(DialogContentExampleDialog, {
width: '90vw', // 90% of the viewport width
height: '80vh', // 80% of the viewport height
maxWidth: '100vw'
});

Try switching units

[woven echo]

doesn't seem to change anything.

[lean canyon]

If this doesn't work provide passing panelClass: 'custom-class' and apply styles to that

[woven echo]

it does not seem that panelclass has any impact to the actual angular component since panelclass is only an additional class added to cdk-overlay-pane.

i want to clarify just in case that i am talking about the dialog itself and not the pane since, as you can see in the screenshot, the component does not fill 100% the pane.

and height: 100% isn't, well, 100%-ing

[lean canyon]

It should work when providing
.panel-class {
width: '400px' !important
height: '600px' !important
}
As my last solution but not the ideal one

I will check on my side too again and your stack blitz tomorrow.

[woven echo]

i am wondering if i am the only one experience this weird behavior.
however it seems to only be a problem when you set height in the options in the open method. like 80vh. (seems to look fine for 70vh and below but trying to use larger height)

    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
      enterAnimationDuration: '0ms',
    exitAnimationDuration: '0ms',
    height: '80vh',
    maxWidth: '90vw',
    maxHeight: '80vh'
  });

[lean canyon]

Not sure why it is happenign but I am using your stackblitz and set up width/height and it worked without any issue.

[woven echo]

yeah i've noticed that it seems to 'work' for anything below 70vh as i have mentioned

however it seems to only be a problem when you set height in the options in the open method. like 80vh. (seems to look fine for 70vh and below but trying to use larger height)
so the problem exists when i set to something like 90vh.

🤔 curious. why would height like 90vh or 80vh just not let component height, well, fill the height.