How to align buttons in the MdDialog md-dialog-actions block

Question

In the MdDialog md-dialog-actions block, is it possible to align the button on the left and two buttons aligned on the right?

Here plnkr some things I'm trying to do. Let's say, according to the first modal, how do I separate the Yes and No buttons? (See file common-model.component.ts) (This plnkr has some other issues that I'm still working on, but this is not related to this issue.)

import { Component } from '@angular/core'; import { MdDialogRef } from "@angular/material"; @Component({ selector: 'common-modal', template: ` <h2 md-dialog-title id="modal-title">{{ title }}</h2> <md-dialog-content> <p class="dialog-body" id="modal-message">{{ message }}</p> </md-dialog-content> <md-dialog-actions align="right"> <button md-raised-button md-dialog-close id="modal-close-btn"> {{ buttonOptions.closeText }} </button> <button md-raised-button *ngIf="buttonOptions.enableNext" id="modal-next-button" (click)="dialogRef.close(true)"> {{ buttonOptions?.nextText }} </button> </md-dialog-actions>`, }) export class CommonModalComponent { /** * {string} The text for the header or title of the dialog. */ title: string; /** * {string} The text for the body or content of the dialog. */ message: string; /** * closeText {string} The text of the close button. (No, Done, Cancel, etc) * nextText {string} The text of the confirming button. (Yes, Next, etc) * enableNext {boolean} True to show the next button. False to hide it. */ buttonOptions: { closeText: string, nextText?: string, enableNext: boolean }; constructor(public dialogRef: MdDialogRef<CommonModalComponent>) { } } 

Answer 1

You can align md-dialog-actions with the align attribute available to Material 2.0.0-beta.2 for words. Update the version if you are not on the latest version. You can use "end" or "center" to align.

 <md-dialog-actions align="end"> ... </md-dialog-action> 

If you want to individually align the buttons, they need custom styles. Use special styles on the buttons to separate them (this may be fixed in the next version of the material)

Answer 2

It may be too late to answer here, but I have some additions that can be made to the solution provided by @PrazSam. Hope it helps! You can add a space between the buttons to create an empty space, and align the pre-space buttons to the left and right buttons to the right of the dialog box. something like below: MdDialogHTML

 <md-dialog-actions align="end"> <button md-button color="primary">+ MORE VARIANTS</button> <span class="spacer"></span> <button md-button color="primary">SAVE</button> <button md-button color="warn" (click)="dialogRef.close()">CANCEL</button> 

MdDialogCSS

 .spacer {flex: 1 1 auto;}