Content Comparison

...

Example

...

Usage

Structure

<custom-dialog>
  <div mat-dialog-title>
    Dialog Title
    <button [mat-dialog-close]="true" class="mat-dialog-close">
      <span class="cvtr-icons remove"></span>
    </button>
  </div>
  <mat-dialog-content>
    Dialog Content
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button>Save</button>
  </mat-dialog-actions>
</custom-dialog>

Dialog Content

• Use <mat-dialog-content> for dialog content.

...

In this case, dialogs can be aligned to the top of the screen rather than middle by adding the class of mat-dialog-top-align to the matcustom-dialog-content container div, e.g:

<div mat<custom-dialog -content class="mat-dialog-top-align">

This class addition will change the position of dialogs from middle aligned, e.g:

...

Top aligned dialog, currently implemented on:

• Leads > Profile Dialog

• Campaign > Leads > Profile Dialog

• Campaign > Publisher > Tracking Information Dialog

• Global > Upload Wizard Dialog (e.g. Advertiser > Import)

• Publisher > Campaign Information Dialog

...

Dialog Size

Default Behaviour

As standard, every dialog has a base width of 1024px. This width is automatically applied without having to adjust any HTML classes.

Alternative Sizes

There are 2 different sizes that can be applied to a dialog:

• Small size

  • Achieved through .mat-dialog-max-width-sml class

• Large size

  • Achieved through .mat-dialog-max-width-lrg class

The size classes noted above should be applied on the the custom-dialog container, e.g:

<custom-dialog class="mat-dialog-max-width-lrg">