The dialog component of Fabric has dialogDefaultMaxWidth set to '340px' by default according to its docs. I want to change it to '640px' but I'm not sure how to do that. The docs are explaining everything using Typescript so I'm getting a little confused as I have no knowledge of the language. All I know is Javascript.
Asked
Active
Viewed 1,980 times
3
-
1I'm confused about this one too. Did you figure it out? – mtl Aug 10 '18 at 09:19
-
Not yet brother. :( I just had to resort to using Modal instead of Dialogues. – UtkarshPramodGupta Aug 10 '18 at 09:21
-
I've tried a few things, but the only thing that works for me is to add a class name to the "containerClassName" property in the "modalProps" prop: `modalProps = {{ isBlocking: false, containerClassName: "my-class-name ms-dialogMainOverride" }}`. Then I can set the `max-width` property in the CSS: `.my-class-name { max-width: 640px; }`. Let me know if you figure out the correct way to do this. – mtl Aug 10 '18 at 09:35
-
1Yeah, that's one of the hacks to do the same. Sure! I'll let you know. :) – UtkarshPramodGupta Aug 10 '18 at 09:41
1 Answers
0
mtl is correct, but something has changed in the years since this was originally answered. Providing the suggested style will get ignored unless you mark it as important:
.my-class-name {
maxWidth: '500px !important'
}
Using important will result in this:
Without out marking it important, you get this:
Ryan Naccarato
- 674
- 8
- 12