Overflowing Height Modal Bootstrap

Question

I have a Bootstrap modal that contains a lot of content, as follows.

However, it turns out that at the bottom of the modal, there is an excess of height modals

I have tried using the max-height property on the modal and overflow on the modal body, but have not found any results yet.

Here's the code :

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>
                <tr>
                  <th>Tanggal Resep</th>
                  <td>07-05-2021, 16:30 WIB</td>
                </tr>
                <tr>
                  <th>No. Resep Dokter</th>
                  <td>10/RI</td>
                </tr>
                <tr>
                  <th>Unit</th>
                  <td>Ruang Bersalin (VK)</td>
                </tr>
                <tr>
                  <th>Nasabah</th>
                  <td>Umum</td>
                </tr>
                <tr className='border-0'>
                  <td>
                    <div className='d-flex flex-column' style={{ lineHeight: 1.5 }}>
                      <span>Abbotic 125 Mg 30 Ml Syrup</span>
                      <span>1x1 Tab Sesudah Makan (Dihabiskan)</span>
                    </div>
                  </td>
                  <td>No. 1</td>
                </tr>
                  <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 best approach/solution to handle this problem?

Any help will be appreciated, thank you

Answer 1

In React Bootstrap, what you need is just adding a scrollable property to your <Modal> element like so:

• Old: <Modal show={show}>
• New: <Modal show={show} scrollable>

---

Sample below used pure HTML for easy illustration of the behaviour:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
  crossorigin="anonymous"
/>

<div class="modal show" style="display: block;">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-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"
        ></button>
      </div>
      <div class="modal-body">
        <div class="d-flex gap-2 mb-3 justify-content-center">
          <img src="https://placekitten.com/200/200" alt="icon rumah sakit" />
          <div style="line-height: 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 class="table table-bordered">
          <tr>
            <th>Nama Pasien</th>
            <td>Udin Solehatun</td>
          </tr>
          <tr>
            <th>Nama Dokter</th>
            <td>Ahmad Pratama</td>
          </tr>
          <tr>
            <th>Tanggal Resep</th>
            <td>07-05-2021, 16:30 WIB</td>
          </tr>
          <tr>
            <th>No. Resep Dokter</th>
            <td>10/RI</td>
          </tr>
          <tr>
            <th>Unit</th>
            <td>Ruang Bersalin (VK)</td>
          </tr>
          <tr>
            <th>Nasabah</th>
            <td>Umum</td>
          </tr>
          <tr className="border-0">
            <td>
              <div className="d-flex flex-column" style="line-height: 1.5">
                <span>Abbotic 125 Mg 30 Ml Syrup</span>
                <span>1x1 Tab Sesudah Makan (Dihabiskan)</span>
              </div>
            </td>
            <td>No. 1</td>
          </tr>
          <tr>
            <td colspan="2">
              <table
                class="table"
                style="border: 1px solid black; text-align: center"
              >
                <thead
                  style="background-color: #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>
              </table>
            </td>
          </tr>
        </table>
        <button type="button" class="btn btn-secondary">CETAK RESEP</button>
      </div>
    </div>
  </div>
</div>