html - angular 8 material dialog stängningsknapp med X uppe till höger

Jag försöker få min materialdialog att ha en X-knapp uppe till höger, men jag har problem med positioneringen.

komponent.ts

this.d.open(loginComponent, {
  width: '300px',
  height: '',
  panelClass: 'dialogC',
});

komponent.html

<mat-dialog-content>
    <button mat-button class="close-icon" [mat-dialog-close]="true">
        <mat-icon>close</mat-icon>
    </button>
    <h2 mat-dialog-title>Login</h2>

style.scss

.dialogC {
  position: relative !important;
}

.close-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

X är bara justerad till vänster istället för högst upp till höger. Förslag?

Uppdatering, detta är problemet jag får efter att ha lagt till flex:

Svar #1

Det enkla sättet nu är:

<div mat-dialog-title class="dialog-title">
  <h2>Title</h2>
  <button mat-icon-button aria-label="close dialog" mat-dialog-close>
    <mat-icon>close</mat-icon>
  </button>
</div>

Och dialogtitel-css är

.dialog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Det fungerar på Angular 8.0.0

Svar #2

<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>

CSS: (Vänligen ange det globalt (styles.css) eller ange ViewEncapsulation.NONE annars kommer dessa stilar inte att påverka.)

.cdk-overlay-pane.my-dialog {
  position: relative!important;
}
.close.mat-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  min-width: auto;
}

Observera att vi nu i CSS har en ny klass från ingenstans .my-dialog

Så, var god nämn det som panelClass i dialogRef enligt nedan,

this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass: 'my-dialog',
..
..

Det ger mig följande resultat,

Svar #3

När du använder mat-icon-button är det bara nödvändigt att lägga till stilen nedan på knappen.

.close-button{
  float: right;
  top:-24px;
  right:-24px;
}

Funktionellt exempel:

stackblitz

Relaterade artiklar