Fluent v9 React Dialog Width

[KC-Anisha]

Hi all,

Does anyone know how one can set the min-width and max-width (and heights) for a Dialog

I think this was an option in v8 but not sure in v9.

Thanks!

[makarandkeer]

I am also looking for increasing width of the Dialog. Anyone found the way to do it?

[KC-Anisha]

I was able to get it working but in a hacky way by adding this to my CSS

.fui-DialogSurface { min-width: 80% !important; }

[makarandkeer]

I have found one more way !!
set style on DialogSurface

<DialogSurface style={{ "min-width": dialogWidth }}

[khmakoto]

Yes, in general, you need to set the style on the DialogSurface. We would recommend creating a class name with makeStyles and adding it via className instead of style for perfomance purposes though 😄.

[makarandkeer]

@khmakoto In my case I have to change min-width dynamically hence I am using style. Is there way to use makeStyles but still change the styles dynamically?

[khmakoto]

Ahhh, you would need to use a css variable in the makeStyles call but still set it via style if you really wanted to use makeStyles, but I agree that it is almost the same thing at that point.