html - How to set up the max-width of $mdDialog?

Question

I'm a new one in css and can not to set up the max-width of my confirmation dialog properly. Here my code of calling dialog:

this.$mdDialog.show({
  content: longText,
  ok: 'OK',
  cancel: 'CANCEL'
  clickOutsideToClose: true,
});

The problem is that my longText doesn't carry and my dialog is very stretched horizontally. I tried to add style.less locally and determine max-width like this:

.md-dialog {
  max-width: 300px;
}

But there is no changes. Could some one help me?

Answer 1

To achieve what you want you should use this way:

.md-dialog-content {
  max-width: 300px;
}

Answer 2

you can try

md-dialog{
max-width: 300px;
}

because md-dialog is not a class it is directive which angular material predefine