Fluentui: Unable to customize Dialog width

[charliemidtlyng]

Bug Report

• __Package version(s)__: 6.9.0
• __Browser and OS versions__: Chrome / Linux

Describe the issue:

I am unable to change minWidth and maxWidth for Dialogs. I have tried sending props, modalProps, dialogContentProps and styles - but none of them will be used in dialog.styles and are therefore useless?

Actual behavior:

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
The props in this class has never set dialogDefaultMinWidth or dialogDefaultMaxWidth and will therefore always use the default values.

Expected behavior:

Width should be overridden by input props.

If applicable, please provide a codepen repro:

https://codepen.io/anon/pen/YvVWjx?editors=1111

Any suggestions? I know i can override with CSS on ms-Dialog-main, but that is a bit risky if your classes changes.

[aditima]

Hi @charliemidtlyng - I modified your codepen slightly to make this work using the new styles callback prop: https://codepen.io/aditima/pen/oyePwB
Hope this helps!

[aditima]

Closing this now. Please re-open if you have more questions.

[liang2zhu1]

@aditima If I just want to apply the style unconditionally what should I do? I have following code working but I'm looking for a way to avoid having selectors because I just want to add styling at root level, thoughts?

private getStyles() {
        return {
            main: [{
                selectors: {
                    [""]: { // Apply at root 
                        minWidth: '450px'
                    }
                }
            }]
        };
    }

[KevinTCoughlin]

Question

@aditima If I just want to apply the style unconditionally what should I do? I have following code working but I'm looking for a way to avoid having selectors because I just want to add styling at root level, thoughts?

private getStyles() {
        return {
            main: [{
                selectors: {
                    [""]: { // Apply at root 
                        minWidth: '450px'
                    }
                }
            }]
        };
    }

Answer

To address @liang2zhu1's question above:

Currently, in order to customize the Dialog's width, you _must_ specify styles for the Dialog's media query selector as @aditima did in the Codepen above. Here's another Codepen example: https://codepen.io/kevintcoughlin/pen/bQGQpp.

<Dialog
  styles={{
    main: {
      selectors: {
        ['@media (min-width: 480px)']: {
          width: 450,
          minWidth: 450,
          maxWidth: '1000px'
        }
      }
    }
  }}
  ...

Why?

Currently, the following media query is overriding minWidth and maxWidth styles placed on the Dialog's main selector due to this LoC:

https://github.com/OfficeDev/office-ui-fabric-react/blob/cf149c2c999db21367074823324514fc910d6532/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts#L21

Conclusion

Admittedly, this is _non-obvious_ and requires looking at the source of Dialog.styles.ts to read the value of ScreenWidthMinMedium which is interpolated into the media query selector. Ideally, developers would be able to override the Dialog's width _without_ knowledge of this media query selector.

Re-opening this issue to see if we can figure out a way to support that.

@jordandrako is there a way we can allow for overriding the Dialog's width which does not require knowledge of this media query?

[KevinTCoughlin]

To answer @charliemidtlyng's original question, min and max width can still be overridden using the minWidth and maxWidth props of Dialog in my testing.

Codepen: https://codepen.io/kevintcoughlin/pen/VVwVeR

<Dialog
  minWidth={740}
  maxWidth={1000}
  ...

[KevinTCoughlin]

Since one can work around this with the above, we'll close this for now. https://github.com/OfficeDev/office-ui-fabric-react/issues/5175#issuecomment-435632440