I need a Office UI fabric dialog component of 600 by 600 px in SPFX webpart. Tried className and containerClassName attributes both didn't work. The style attribute doesn't.

The max-width is set to 480px. I need to override this(both height and width).

Somebody please help.

return (
        <DefaultButton secondaryText="Opens Dialog" onClick={this._showDialog} text="Open Dialog" />

            type: DialogType.normal,
            title: 'All emails together',           
            subText: 'sample text',
            titleAriaId: 'myLabelId',
            subtitleAriaId: 'mySubTextId',
            isBlocking: false,
            containerClassName: 'ms-dialogMainOverride'                       
            <PrimaryButton onClick={this._closeDialog} text="Save" />
            <DefaultButton onClick={this._closeDialog} text="Cancel" />
  • can you try .ms-dialogMainOverride { max-width: 300px !important; max-height: 300px !important; } and check ? – Gautam Sheth Jun 28 '18 at 11:33
  • It didn't work. I added the above code in the SCSS file. Am I doing it wrong? – Ashik Paul Jun 28 '18 at 13:44

It was simple. Add a custom class in containerClassName property.

So in the SCSS file use the below code

.textDialog {
    max-width: 100%;
    width : 600px;
    max-height: 100%;
    height : 600px;

In tsx file use the below code

      title={ "Large" }
      subText={ "Hello world" }
      containerClassName={ 'ms-dialogMainOverride ' + styles.textDialog}>                

enter image description here

And it works. Thanks anyway


I found this issue on Github:


override the max-width property

.ms-Dialog-main {
    max-width: 600px !important;
    max-height: 600px !important;

    width: 600px;
    height: 600px;
  • 1
    Sorry, I had already tried this. It didn't work. Thanks. – Ashik Paul Jun 28 '18 at 8:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.