CODEWITHSUNDEEP
angularangular-material
cpeddie
cpeddie

Reputation: 799

Using mat-form-field in dialog breaks mat-toolbar

I have a dialog that I finally got working in Angular 7 with latest material. I want a mat-toolbar as the header of the dialog and then am trying to use the owlDateTime picker to allow a date range to be part of the dialog. If I just use label/input fields, the mat-toolbar continues to display properly. But if I surround the input/label with mat-form-field to get nice styling, the toolbar breaks. It doesn't display the title variable passed into the component, and the styling is broken. Here is a sshot of the toolbar working with a not so nice date/time picker:

And here is the image when I wrap the date/time picker field with mat-form-field. Here is the html working: enter image description here

and not working: enter image description here

Here is the html of the toolbar working:

<mat-toolbar color="primary">
    <h2 mat-dialog-title>{{title}}</h2>
    <span class="flex-spacer"></span>
    <button mat-button mat-dialog-close >&times;</button>

</mat-toolbar>

      <label>Date/Time Range
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'" style="width: 70%">
        <owl-date-time #dt10></owl-date-time>
      </label>

  <mat-dialog-actions align="center">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
  </mat-dialog-actions>

And the form-field working:

<mat-toolbar color="primary">
    <h2 mat-dialog-title>{{title}}</h2>
    <span class="flex-spacer"></span>
    <button mat-button mat-dialog-close >&times;</button>

</mat-toolbar>

<mat-form-field>

      <label>Date/Time Range
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'" style="width: 70%">
        <owl-date-time #dt10></owl-date-time>
      </label>
</mat-form-field>

  <mat-dialog-actions align="center">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
  </mat-dialog-actions>

Why would the mat-form-field so adversely affect the toolbar? Is there a way to get the two to play nicely, or will I have to mess around with css to style the input the way I want it?

Thanks.....

Upvotes: 3

Views: 3556

Answers (1)

yomateo
yomateo

Reputation: 2377

You should be using the mat-dialog-title and mat-dialog-content components. See https://material.angular.io/components/dialog/api#MatDialogContent this will get you lined up correctly.

Upvotes: 1

Related Questions