Forum Discussion
chowdam999
Apr 11, 2020Copper Contributor
ModelProps not supporting Styles property in office ui fabric control dialog component.
<Dialog
hidden={hideDialog}
onDismiss={this._closeDialog}
dialogContentProps={{
type: DialogType.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.
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'}
- Sudharsan KSteel ContributorHi,
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...- chowdam999Copper Contributor
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'}- Sudharsan KSteel ContributorHi,
Please choose the best response and close the discussion. It would help others to resolve their issues.