How to add scroll into react-bootstrap Modal.Body

Hemã Vidal picture Hemã Vidal · Feb 20, 2018 · Viewed 10.9k times · Source

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

Hem&#227; Vidal picture Hemã Vidal · Feb 20, 2018

Thanks to Amit answer.

Found Solution:

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

    <Modal.Body style={{'max-height': 'calc(100vh - 210px)', 'overflow-y': 'auto'}}>One fine body...</Modal.Body>

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