Forum Discussion

chowdam999's avatar
chowdam999
Copper Contributor
Apr 11, 2020

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

 <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.
  • chowdam999's avatar
    chowdam999
    Apr 12, 2020

    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'}
     
  • Sudharsan K's avatar
    Sudharsan K
    Steel Contributor
    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...
    • chowdam999's avatar
      chowdam999
      Copper Contributor

      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'}
       
      • Sudharsan K's avatar
        Sudharsan K
        Steel Contributor
        Hi,
        Please choose the best response and close the discussion. It would help others to resolve their issues.

Resources