CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menubootstrap-4
Echilon
Echilon

Reputation: 10254

Bootstrap dropdown inside accordion

I have an Accordion which has a header, inside which I need to place a dropdown menu. I've tried fiddling with the z-index thinking it was a stacking issue to no avail. I've reproduced the issue with a minimal sample at https://www.bootply.com/53bH05eQlf

Is there any way to get the dropdown menu to display correctly?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
  <div class="card">
    <div class="card-header">Blah
    <div class="dropdown text-center show border-info border rounded menu-button float-left">
                <a class="btn p-0 dropdown-toggle" href="#" role="button" id="some-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="fa fa-bars"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="some-dropdown">
                    <li class="dropdown-item"><a href="#">Hidden behind the card!</a></li>
                </ul>
            </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
  <div class="card">
    <div class="card-header">Blah</div>
  </div>
</div>

Upvotes: 1

Views: 838

Answers (1)

rahulpsd18
rahulpsd18

Reputation: 681

Adding style="overflow: visible" to the card div which contains the dropdown will solve the issue.

That is, for the bootply example replace <div class="card"> on line 8 with <div class="card" style="overflow: visible">.

Upvotes: 3

Related Questions