Bootstrap 5 Dropdown in Modal

by leoliaolei

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js"></script>
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">
      Modal Title
    </h4>
  </div>
  <div class="modal-body bg-secondary" style="height:15rem; overflow-y:auto;">
    <div class="alert alert-info">
      Modal body is fixed height and scrollable. Want to make dropdown menu fully visible.
    </div>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown
      </button>
      <div class="dropdown-menu">
        <div class="p-3" style="width:10rem;height:12rem;">
          Dropdown Content
        </div>
      </div>
    </div>
  </div>
</div>