how to set the width of modal of react-responsive-modal?

Question

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>

kadash · Accepted Answer · 2020-07-28 07:47:58Z

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

edited Jul 28, 2020 at 7:47

answered Jul 27, 2020 at 15:54

kadash

3001 silver badge11 bronze badges

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

2 Comments

phongyewtong Over a year ago

i not sure why the width cant be changed its always width: 100%

kadash Over a year ago

@phongyewtong I added working code example. Please take a look and check if it fullfills your requirements

Collectives™ on Stack Overflow

how to set the width of modal of react-responsive-modal?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related