SOLVED

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

%3CLINGO-SUB%20id%3D%22lingo-sub-1300252%22%20slang%3D%22en-US%22%3EModelProps%20not%20supporting%20Styles%20property%20in%20office%20ui%20fabric%20control%20dialog%20component.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1300252%22%20slang%3D%22en-US%22%3E%3CDIV%3E%26nbsp%3B%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDialog%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bhidden%3D%7BhideDialog%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3EonDismiss%3D%7B%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E._closeDialog%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3BdialogContentProps%3D%7B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Etype%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EDialogType%3C%2FSPAN%3E%3CSPAN%3E.normal%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3Etitle%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E'Missing%26nbsp%3BSubject'%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3EsubText%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E'Do%26nbsp%3Byou%26nbsp%3Bwant%26nbsp%3Bto%26nbsp%3Bsend%26nbsp%3Bthis%26nbsp%3Bmessage%26nbsp%3Bwithout%26nbsp%3Ba%26nbsp%3Bsubject%3F'%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3BmodalProps%3D%7B%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3E%3CSTRONG%3Estyles%3A%26nbsp%3B%7B%26nbsp%3Bmain%3A%26nbsp%3B%7B%26nbsp%3BmaxWidth%3A%26nbsp%3B%3C%2FSTRONG%3E%3C%2FSPAN%3E%3CSTRONG%3E450%26nbsp%3B%7D%26nbsp%3B%7D%2C%3C%2FSTRONG%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3EisModeless%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Etrue%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3EdragOptions%3A%26nbsp%3BisDraggable%26nbsp%3B%3F%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E._dragOptions%26nbsp%3B%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Eundefined%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3EonDismissed%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E._closeDialog%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26gt%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Estyles%20is%20not%20supporting%20on%20dialog%20box%20.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EI%20want%20to%20give%20custom%20width%20and%20height%20to%20dialogBox.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1300934%22%20slang%3D%22en-US%22%3ERe%3A%20ModelProps%20not%20supporting%20Styles%20property%20in%20office%20ui%20fabric%20control%20dialog%20component.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1300934%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EPlease%20try%20the%20below%20with%20width%20and%20height%20as%20450.%3CBR%20%2F%3E%3CDIALOG%3E%3CBR%20%2F%3Ehidden%3D%7BhideDialog%7D%3CBR%20%2F%3EonDismiss%3D%7Bthis._closeDialog%7D%3CBR%20%2F%3EdialogContentProps%3D%7B%7B%3CBR%20%2F%3Etype%3A%20DialogType.normal%2C%3CBR%20%2F%3Etitle%3A%20'Missing%20Subject'%2C%3CBR%20%2F%3EsubText%3A%20'Do%20you%20want%20to%20send%20this%20message%20without%20a%20subject%3F'%2C%3CBR%20%2F%3E%7D%7D%3CBR%20%2F%3EmaxWidth%3D%7B450%7D%3CBR%20%2F%3EmodalProps%3D%7B%7B%3CBR%20%2F%3Estyles%3A%20%7B%20main%3A%20%7B%20height%3A%20450%20%7D%20%7D%2C%3CBR%20%2F%3EisModeless%3A%20true%2C%3CBR%20%2F%3EdragOptions%3A%20isDraggable%20%3F%20this._dragOptions%20%3A%20undefined%2C%3CBR%20%2F%3EonDismissed%3A%20this._closeDialog%2C%3CBR%20%2F%3E%7D%7D%3CBR%20%2F%3E%26gt%3B%3CBR%20%2F%3E%3CBR%20%2F%3EHope%20it%20helps%2C%20please%20like%20it%20or%20mark%20it%20as%20a%20solution%20if%20it%20resolves%20ur%20clarification%20or%20issue%3CBR%20%2F%3E-Sudharsan%20K...%3C%2FDIALOG%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1301129%22%20slang%3D%22en-US%22%3ERe%3A%20ModelProps%20not%20supporting%20Styles%20property%20in%20office%20ui%20fabric%20control%20dialog%20component.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1301129%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F144422%22%20target%3D%22_blank%22%3E%40Sudharsan%20K%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPreviously%20it%20supported%20%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EmodalProps%3D%7B%7B%3CBR%20%2F%3EtitleAriaId%3A%20this.labelId%2C%3CBR%20%2F%3EsubtitleAriaId%3A%20this.subTextId%2C%3CBR%20%2F%3EisBlocking%3A%20false%2C%3CBR%20%2F%3Estyles%3A%20%7B%20main%3A%20%7B%20height%3A%20350%2C%20width%3A%20500%20%7D%20%7D%2C%3CBR%20%2F%3E%7D%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENow%20its%20working%20with%20below%20code%20%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EmodalProps%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EisBlocking%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Efalse%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%7B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Emain%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%7B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3Eheight%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E700%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%7D%26nbsp%3B%7D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EminWidth%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E'1450px'%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1301708%22%20slang%3D%22en-US%22%3ERe%3A%20ModelProps%20not%20supporting%20Styles%20property%20in%20office%20ui%20fabric%20control%20dialog%20component.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1301708%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EPlease%20choose%20the%20best%20response%20and%20close%20the%20discussion.%20It%20would%20help%20others%20to%20resolve%20their%20issues.%3C%2FLINGO-BODY%3E
Highlighted
New 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
Highlighted
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...
Highlighted
Best Response confirmed by chowdam999 (New 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'}
 
Highlighted
Hi,
Please choose the best response and close the discussion. It would help others to resolve their issues.