3

how do I set the width of the modal of react-responsive-modal?

https://react-responsive-modal.leopradel.com/#props

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

1 Answer 1

2

I think it would be the best it by styling class in css .react-responsive-modal-modal { width: 500px }

You can also use react ref to add style using javascript https://reactjs.org/docs/glossary.html#refs

EDIT: I created working code example: In index.html I added styles:

<style>
  .react-responsive-modal-modal {
    width: 200px;
  }
</style>

https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html

Sign up to request clarification or add additional context in comments.

2 Comments

i not sure why the width cant be changed its always width: 100%
@phongyewtong I added working code example. Please take a look and check if it fullfills your requirements

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.