'How to add scroll into react-bootstrap Modal.Body
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>
Solution 1:[1]
you can add scrollable
to the Modal
:
<Modal scrollable={true}>
</Modal>
You can get details from the Modal
docs
Solution 2:[2]
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | DᴀʀᴛʜVᴀᴅᴇʀ |
Solution 2 | DᴀʀᴛʜVᴀᴅᴇʀ |