How to customize width and hieght of Dialog component of Office UI fabric in SPFX webparts

Question

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 (
      <div>
        <DefaultButton secondaryText="Opens Dialog" onClick={this._showDialog} text="Open Dialog" />

        <Dialog              
          hidden={this.state.hideDialog}
          onDismiss={this._closeDialog}                   
          dialogContentProps={{
            type: DialogType.normal,
            title: 'All emails together',           
            subText: 'sample text',
          }}
          modalProps={{
            titleAriaId: 'myLabelId',
            subtitleAriaId: 'mySubTextId',
            isBlocking: false,
            containerClassName: 'ms-dialogMainOverride'                       
          }}>             
          <DialogFooter>
            <PrimaryButton onClick={this._closeDialog} text="Save" />
            <DefaultButton onClick={this._closeDialog} text="Cancel" />
          </DialogFooter>
        </Dialog>
      </div>);

Answer 1

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

<Dialog
      hidden={this.state.hideDialog}
      onDismiss={this._closeDialog}
      type={DialogType.normal}
      title={ "Large" }
      subText={ "Hello world" }
      containerClassName={ 'ms-dialogMainOverride ' + styles.textDialog}>                
</Dialog>

And it works. Thanks anyway

Answer 2

I found this issue on Github:

https://github.com/OfficeDev/office-ui-fabric-core/issues/608

override the max-width property

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

    width: 600px;
    height: 600px;
 }