Boostrap dropdown into modal

Question

My problem is when I click on the button to open the dropdown menu. The height of the modal-body is not increasing, instead the modal is hidden and I have to scroll into modal-body.

How I can make the modal-body to increases the height?

JSFiddle

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<button id="charts" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">MODAL</button>

<div class="modal" id="modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-body">
        <div class="btn-group">
          <button type="button" class="btn btn-dark dropdown-toggle tags" data-bs-toggle="dropdown" aria-expanded="false">TAGS</button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-bs-dismiss="modal">CLOSE</button>
      </div>
    </div>
  </div>
</div>

@Yogi , This solution makes the menu to appears above the modal, instead of increasing the height of modal. But works for me, so thank you. — KunLun
– KunLun, Commented Apr 14 at 9:52

Lajos Arpad · Accepted Answer · 2025-04-12 12:10:45Z

You can do it via a CSS rule that specifies the height of the modal when it's opened, like

.modal.show .modal-content {
  height: 4000px;
}

Snippet:

.modal.show .modal-content {
  height: 4000px;
}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<button id="charts" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">MODAL</button>

<div class="modal" id="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-dark dropdown-toggle tags" data-bs-toggle="dropdown" aria-expanded="false">TAGS</button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-bs-dismiss="modal">CLOSE</button>
            </div>
        </div>
    </div>
</div>

The .modal will only have the .show class if it's shown, so the rule applies if and only if the modal is opened.

Thank you for your solution, but I used data-bs-popper-config='{"strategy":"fixed"}' on buttons. Which makes the menu to appears above the modal. This way it fits better in my case.
@KunLun happy to help and I'm glad the issue has been resolved.

Collectives™ on Stack Overflow

Boostrap dropdown into modal

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related