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?

Brause

Can you please copy here your view code? – Alliteration

@Alliteration do you mean the code from browser? – Brause

Take a look at my answer. – Alliteration

Answer 1

To achieve what you want you should use this way:

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

Alliteration

I have tried do like you wrote already. But it makes no sense. I think the problem my confirmation dialog calling from globalService. Am I right? – Brause

Even if you put only .md-dialog-content { instead of the 2 classes? – Alliteration

Nope. It is corret only if I change my confirm.html in globalService. If I add these lines in my local style.less there is no sense. – Brause

By the way I think I can mark your post as answer because of my hard architecture in project. – Brause

See their code on codepen material.angularjs.org/latest/demo/dialog, if you change the CSS as I said, it changes the width as well,. – Alliteration

Answer 2

you can try

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

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

Yearwood