In my Bootstrap modal, I have a plethora of content, such as:
https://i.sstatic.net/o6lm4.png
However, the bottom of the modal is experiencing an overflow of height like so:
https://i.sstatic.net/qlKrl.png
I've attempted utilizing the max-height property on the modal and overflow on the modal body, but no success has been achieved.
Here is the code snippet:
const ModalsPreviewHTKP = ({ show, onHide, defaultValues }) => {
const resData = defaultValues?.id;
return (
<Modal show={show}>
<Modal.Header className='txt-blue-grey-700 text-bold header-md'>
<span className='mx-auto'>PRATINJAU HTKP</span>
<button type="button" class="btn-close m-0 p-0" aria-label="Close" onClick={onHide}></button>
</Modal.Header>
<Modal.Body>
<div className='d-flex gap-2 mb-3 justify-content-center'>
<img src={iconCard} alt="icon rumah sakit"/>
<div style={{ lineHeight: '1.5em' }}>
<p>RS KASIH IBU BANDUNG</p>
<p>Jl. Cibolerang No. 23 Bandung 40225 <br/>
Telp: 022-8876-4532, Fax: (022)</p>
</div>
</div>
<Table bordered>
<tr>
<th>Nama Pasien</th>
<td>Udin Solehatun</td>
</tr>
<tr>
<th>Nama Dokter</th>
<td>Ahmad Pratama</td>
</tr>
// More code here...
<tr>
<td colSpan={2}>
<Table style={{ border: '1px solid black', textAlign: 'center' }}>
<thead style={{ backgroundColor: '#ECEFF1', border: '1px solid black' }}>
<th style={{ width: '25%' }}>H</th>
<th style={{ width: '25%' }}>T</th>
<th style={{ width: '25%' }}>K</th>
<th style={{ width: '25%' }}>P</th>
</thead>
{/* <tbody>
</tbody> */}
</Table>
</td>
</tr>
</Table>
<ButtonSecondary variant="solid">CETAK RESEP <FaPrint color='white'/> </ButtonSecondary>
</Modal.Body>
</Modal>
)
}
What is the recommended approach/solution to address this issue?
Any assistance would be greatly valued. Thank you.