themesberg
Modal content is truncated at the top on medium displays with long content
Describe the bug Modal content is truncated at the top on medium displays with long content
To Reproduce
I have the following modal:
<Modal show={true} onClose={onClose}>
<Modal.Header>Header</Modal.Header>
<Modal.Body>
<ol className='list-decimal'>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
</Modal.Body>
<Modal.Footer>
<Button color='gray' onClick={onClose}>
Cancel
</Button>
<Button onClick={onSave}>Save</Button>
</Modal.Footer>
</Modal>
On small screens, it displays fine, however on larger screens (md or greater), the top of the modal is truncated.
Expected behavior A clear and concise description of what you expected to happen.
Screenshots Small screen:
Medium screen or greater (note, this is scrolled all the way to the top):
Project information:
- Tailwind: 3.2.6
- Flowbite: 1.6.3
- Flowbite React: 0.3.8
- Type: Nextjs
This still appears to be an issue, and it appears #658 hasn't properly addressed the issue. I've tried using the modal on both 0.4.2 and 0.4.3 and I run into the top of the modal getting cut off when it grows large.
You can even recreate this behaviour in the docs:
Scrolling to the bottom doesn't seem to have any issue.
