如何将滚动添加到 react-bootstrap Modal.Body

Question

I'm using react-bootstrap modal .

How can I make only body to scroll and not all the page?

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body>One fine body...</Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

Answer 1

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

Answer 2

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