I have been developing an e-commerce app with Angular 14.

I am currently working on a form that can only ne submitted upon accepting conditions displayed in a modal.

I app.component.ts I have:

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { FormGroup, FormControl } from '@angular/forms';
import { HelloComponent } from './hello/hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public form: FormGroup = new FormGroup({});

  constructor(private dialog: MatDialog) {}

  ngOnInit() {
    this.form = new FormGroup({
      first_name: new FormControl(''),
      last_name: new FormControl(''),
      phone: new FormControl(''),
      email: new FormControl(''),
    });
  }

  public openDialog() {
    const dialogConfig = new MatDialogConfig();

    // Dialog options
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = '420px';
    dialogConfig.height = '320px';

    this.dialog.open(HelloComponent, dialogConfig);
  }
}

In the tenplate, hello.component.html I have

<div mat-dialog-title>
  <h2>Terms and Conditions</h2>
</div>

<div mat-dialog-content>
  <p>
    Quia hic repellendus cupiditate ipsam voluptates, officia reiciendis quas.
    Tempore autem quia amet, quas dolor qui animi, quidem neque quam blanditiis
    nobis vero temporibus in, nisi dolore adipisci? Minus, cum.
  </p>
  <p>
    Esse placeat nisi iusto earum, eius dolor ipsa aliquam laborum, praesentium
    eum, maxime labore maiores odit distinctio! Eius, id amet. Ex quaerat
    veritatis suscipit nulla delectus fugit saepe, explicabo eveniet?
  </p>
  <p>
    Optio quae deserunt blanditiis! Quisquam quis libero quae dolor ipsam,
    nesciunt dolore alias provident maiores eligendi iusto magnam soluta,
    aspernatur exercitationem error temporibus modi neque blanditiis laborum
    perspiciatis. Impedit, quis.
  </p>
</div>

<mat-dialog-actions>
  <button mat-raised-button color="primary" (click)="reject()">Reject</button>
  <button mat-raised-button color="primary" (click)="accept()">Accept</button>
</mat-dialog-actions>

The styles:

::ng-deep .mat-dialog-container {
  padding: 0 !important;
  overflow: hidden;
}

.mat-dialog-content {
  padding: 0 10px 0 20px;
  margin: 0 -10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.mat-dialog-title {
  margin: 0 !important;
  border-bottom: 1px solid #ccc;
}

.mat-dialog-title h2 {
  font-size: 18px;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}

p {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
  margin-top: 0;
  margin-bottom: 10px;
}

.mat-dialog-actions {
  justify-content: center;
  border-top: 1px solid #ccc;
}

The problem

As can be seen in THIS Stackblitz, the dialog's header is not visible (unless its footer, <mat-dialog-actions> is absent).

Questions

1. How can I fix this bug?
2. Is there a solution that does not affect the modal's aesthetics?

CodePudding user response：

your title is not shown because your dialog content exceeds the dialogs size.

I also had problems with the sizing in Angular Material dialogs. What I would do is not setting the height in the dialog config (Height in % does not work for whatever reason in MatDialogs).

I'd rather set the height in the mat-dialog-content itself.

I forked your project and made some editing here: StackBlitz edited

It seems to work like that.

Hope it helps. :)

CodePudding user response：

I have solved it by doing this:

A) Unset the dialog height:

// Dialog options
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = '420px';
// dialogConfig.height = '320px'; 

B) Set the bottom margin of the <mat-dialog-actions> element to 0.

.mat-dialog-actions {
  justify-content: center;
  border-top: 1px solid #ccc;
  margin-bottom: 0;
}