4

In our web app I use Angular-Materials $mdDialog with the confirm-object. Is it possible to change the order of the buttons from cancel-ok to ok-cancel? And to set the initial focus to the cancel button? Maybe via CSS or a template?

The code looks like that:

var confirm = this.$mdDialog.confirm()
  .parent(angular.element(document.body))
  .title('Löschen')
  .content('Möchten Sie wirklich löschen?')
  .ariaLabel('Löschen')
  .ok('Ja')
  .cancel('Nein')
  .targetEvent(event);

this.$mdDialog.show(confirm)
  .then(() => {
     // do something
  });

enter image description here

maxhb
  • 8,554
  • 9
  • 29
  • 53
swimagers
  • 71
  • 1
  • 5
  • I don't think they have that built in if you aren't using a custom template. This is due to "Dismissive actions are always placed directly to the left of affirmative actions." https://www.google.com/design/spec/components/dialogs.html#dialogs-specs – Jacob Feb 18 '16 at 14:47
  • Ok, I think you're right. But maybe we could find a little workaround. – swimagers Feb 19 '16 at 07:02
  • In my opinion the material design guidelines are just wrong here. Since I can remember affirmative actions have always been on the left side of dismissive actions. Even the chrome confirm dialog has it this way. Why change something that worked for over 25 years? – Daniele Torino Jun 22 '17 at 16:02
  • Want to switch the order as well? Any news on this? Really ugly workaround is to switch the logic in code of `ok()` and `cancel()` – A.W. Sep 05 '17 at 07:37

1 Answers1

8

This might work:

md-dialog md-dialog-actions {
    display: block;
}

md-dialog md-dialog-actions button {
    float: right;
}
Thomas Ghesquiere
  • 402
  • 4
  • 7
  • Good idea, but it didn't work (even if I put an !important to the end). – swimagers Feb 19 '16 at 07:01
  • This works on the [example page](https://material.angularjs.org/latest/demo/dialog), so your dialog must have a different layout. You should inspect your html structure (f.i. with chrome devtools) and apply the `display: block;` to the button container, and `float: right;` to the buttons. – Thomas Ghesquiere Feb 19 '16 at 07:37