How do I change the width of the modal?

[phongyewtong]

Summary:

How do I change the width?

<div style={{minWidth: '600px', width: '600px', maxWidth: '600px'}} >
    <Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}>
          <CreateSubmenu onFormSubmit={this.onSubmenuFormSubmit} editData={editSubmenuData}/>
     </Modal>
</div>

[namnguyen21]

you should be able to apply custom styles to the modal via the 'style' prop. Via the npm docs: const customStyles = { content : { top : '50%', left : '50%', right : 'auto', bottom : 'auto', marginRight : '-50%', transform : 'translate(-50%, -50%)' } };

<Modal isOpen={modalIsOpen} onAfterOpen={afterOpenModal} onRequestClose={closeModal} style={customStyles} contentLabel="Example Modal" >

you can just replace the position styling shown above with 'width: 600px' or whatever width you desire

[diasbruno]

Thanks, @namnguyen21!

@phongyewtong Did this solve your problem?

[TimSC]

I tried this solution with only partial success. The custom styles appear in ReactModal__Content but I still need to update modal-dialog as this has max-width:500px. I believe this is an attempt to change that but not sure if it works https://stackoverflow.com/a/52951219/4288232

[TimSC]

This seemed to work (together with using customStyles as discussed above):

@media screen and (min-width: 992px) { 
    .modal-dialog {
        max-width: 900px;
        max-height: 80%;
    }
}

@media screen and (min-width: 426px) and (max-width: 991) { 
    .modal-dialog {
        max-width: 80%;
        max-height: 80%;
    }
}

@media screen and (max-width: 425px) { 
    .modal-dialog {
        max-width: 100%;
        max-height: 100%;
    }
}