How to add scroll into react-bootstrap Modal.Body How to add scroll into react-bootstrap Modal.Body reactjs reactjs

How to add scroll into react-bootstrap Modal.Body


Thanks to Amit answer.

The first solution using only styles would be the following:

  <Modal.Dialog>    <Modal.Header>      <Modal.Title>Modal title</Modal.Title>    </Modal.Header>    <Modal.Body style={{      maxHeight: 'calc(100vh - 210px)',      overflowY: 'auto'     }}    >     One fine body...    </Modal.Body>    <Modal.Footer>      <Button>Close</Button>      <Button bsStyle="primary">Save changes</Button>    </Modal.Footer>  </Modal.Dialog>

There is a new way to implement that behavior using the react-bootstrap itself:

<Modal  scrollable={true}  ....>  ....</Modal>

Documentation: https://react-bootstrap.netlify.app/components/modal/#modals


you can add scrallable to Modal tag like this

<Modal scrollable={true} ></Modal>

you can get in detail here: https://react-bootstrap.netlify.app/components/modal/#modals