How to align button right inside Dialog angular material?

问题

I want align button right corner of the dialog below is my html

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

demo

回答1:

You can use the align HTML attribute:

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Demo

Note: The reason why setting an align="end" attribute works on the dialog's actions container is because the align attribute is used to add flexbox properties to the dialog actions in the dialog component's theming SCSS file:

(Extract of dialog.scss)

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

Here's the source code.

回答2:

Since the align attribute is not supported in HTML5, you should use this CSS instead:

.mat-dialog-actions {
    justify-content: flex-end;
}

This is what is done internally by Angular Material when you put align="end", you can inspect the element to check that.

回答3:

Use the build in toolbar that is part of material.

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Edit Task</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
    </h4>
    <div mat-dialog-content>
    Modal Content here
    </div>

Custom CSS for header

.task-header {
    background-color: transparent;
    padding: 0 5px;
    height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}

回答4:

Remove

{display: flex}

styling for class mat-dialog-actions

回答5:

Guess i'm a bit late but anyway.
you can use float style attribute:

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial style="float: left;">Ok</button>

I used inline styling for easier demonstration
but I don't recommend inline styling for your projects.
use seperate style sheets instead

回答6:

Close functionality and button alignment without TypeScript.

HTML:

<button class="button-close" mat-button [mat-dialog-close]="true">X</button>

CSS:

.button-close {
    justify-self: right;
    font-size: 20px;
    border: none;
    height: 30px;
    background-color: #FFFFFF;
    outline: none;
    color: #c04747;
    
    &:hover {
        cursor: pointer;
    }
}

来源：https://stackoverflow.com/questions/49420069/how-to-align-button-right-inside-dialog-angular-material

标签

angular

angular-material

angular-material2