10

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?

user3818229
  • 1,537
  • 2
  • 21
  • 46

2 Answers2

11

To achieve what you want you should use this way:

.md-dialog-content {
  max-width: 300px;
}
developer033
  • 24,267
  • 8
  • 82
  • 108
  • 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? – user3818229 Jul 08 '16 at 19:34
  • Even if you put only `.md-dialog-content {` instead of the 2 classes? – developer033 Jul 08 '16 at 19:35
  • 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. – user3818229 Jul 08 '16 at 19:40
  • By the way I think I can mark your post as answer because of my hard architecture in project. – user3818229 Jul 08 '16 at 19:42
  • See their code on *codepen* https://material.angularjs.org/latest/demo/dialog, if you change the CSS as I said, it changes the *width* as well,. – developer033 Jul 08 '16 at 19:43
1

you can try 

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

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

Aravind Reddy
  • 747
  • 6
  • 20