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 style="height:15rem;overflow-y:auto">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">
        Modal Title
      </h4>
    </div>
    <div class="modal-body bg-secondary" style="height:10rem; overflow-y:auto;">
      <div class="alert alert-info">
        Modal body is fixed height and scrollable. Want to make dropdown menu fully visible.
      </div>
      <button type="button" class="btn btn-info" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" opx-dropdown>Bootstrap5 Popover
      </button>
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false">
          Dropdown
        </button>
        <div class="dropdown-menu">
          <div class="p-3" style="width:10rem;height:12rem;">
            Dropdown Content
          </div>
        </div>
      </div>
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false">
          Dropdown2
        </button>
        <div class="dropdown-menu">
          <div class="p-3" style="width:10rem;height:12rem;">
            Dropdown Content
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    Other element
  </div>
</div>

CSS

.dropdown {
  display: inline-block;
}

JavaScript

var popover = new bootstrap.Popover(document.querySelector('.btn-info'))

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
return;
dropdownElementList.map(function(dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl, {
    popperConfig: {
      strategy: 'fixed',
      modifiers: []
    }
  });
});