SOLVED

ModelProps not supporting Styles property in office ui fabric control dialog component.

Copper Contributor
 <Dialog
          hidden={hideDialog}
          onDismiss={this._closeDialog}
          dialogContentProps={{
            typeDialogType.normal,
            title: 'Missing Subject',
            subText: 'Do you want to send this message without a subject?',
          }}
          modalProps={{
            styles: { main: { maxWidth: 450 } },
            isModeless: true,
            dragOptions: isDraggable ? this._dragOptions : undefined,
            onDismissed: this._closeDialog,
          }}
        >
 
styles is not supporting on dialog box .
I want to give custom width and height to dialogBox.
3 Replies
Hi,
Please try the below with width and height as 450.
<Dialog
hidden={hideDialog}
onDismiss={this._closeDialog}
dialogContentProps={{
type: DialogType.normal,
title: 'Missing Subject',
subText: 'Do you want to send this message without a subject?',
}}
maxWidth={450}
modalProps={{
styles: { main: { height: 450 } },
isModeless: true,
dragOptions: isDraggable ? this._dragOptions : undefined,
onDismissed: this._closeDialog,
}}
>

Hope it helps, please like it or mark it as a solution if it resolves ur clarification or issue
-Sudharsan K...
best response confirmed by chowdam999 (Copper Contributor)
Solution

@Sudharsan K 

 

Previously it supported :

 

modalProps={{
titleAriaId: this.labelId,
subtitleAriaId: this.subTextId,
isBlocking: false,
styles: { main: { height: 350, width: 500 } },
}}

 

 

Now its working with below code :

 

 modalProps={{
                        isBlocking: false,
                        styles: { main: { height: 700 } },

                    }}
                    minWidth={'1450px'}
 
Hi,
Please choose the best response and close the discussion. It would help others to resolve their issues.
1 best response

Accepted Solutions
best response confirmed by chowdam999 (Copper Contributor)
Solution

@Sudharsan K 

 

Previously it supported :

 

modalProps={{
titleAriaId: this.labelId,
subtitleAriaId: this.subTextId,
isBlocking: false,
styles: { main: { height: 350, width: 500 } },
}}

 

 

Now its working with below code :

 

 modalProps={{
                        isBlocking: false,
                        styles: { main: { height: 700 } },

                    }}
                    minWidth={'1450px'}
 

View solution in original post