Bootstrap 4 dropdown menu within accordion

Question

I am using Bootstrap 4 and accordion panels, within those panels i have tables and some inputs with dropdown menu's. From the snippet i have provided you can see that the dropdown doesn't show on top (over the other accordion) and just shows within the accordion.

Does anyone know a way around this?

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseExample">
           Accordion Dropdown Example
         </a>
  </div>
  <div id="collapseExample" class="collapse" data-parent="#accordion">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Input with dropdown example</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="input-group">
                  <input name="inputwithdropdown" type="text" class="form-control">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Menu1</a>
                      <a class="dropdown-item" href="#">Menu2</a>
                      <a class="dropdown-item" href="#">Menu3</a>
                      <a class="dropdown-item" href="#">Menu4</a>
                      <a class="dropdown-item" href="#">Menu5</a>
                      <a class="dropdown-item" href="#">Menu6</a>
                      <a class="dropdown-item" href="#">Menu7</a>
                      <a class="dropdown-item" href="#">Menu8</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseAnother">
           Another Accordion Dropdown
         </a>
  </div>
  <div id="collapseAnother" class="collapse" data-parent="#accordion">
    <div class="card-body">
      <div class="col-3">
        This is just another dropdown accrodion
      </div>
    </div>
  </div>
</div>

score 0 · Answer 1 · answered Aug 09 '18 at 11:43

Dropdown placement in Bootstrap 4 is done dynamically using popper.js which can be a problem inside other elements like the accordion. You can control the dropdown position using some of the options explained here.

In this case using data-boundary="parent" data-flip="false" and dropdown-menu-right on the the Dropdown seem to work best.

https://www.codeply.com/go/YC9Fj7eMKb

<div class="input-group">
    <input name="inputwithdropdown" type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-boundary="parent" data-flip="false" aria-haspopup="true" aria-expanded="false"></button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Menu1</a>
            <a class="dropdown-item" href="#">Menu2</a>
            <a class="dropdown-item" href="#">Menu3</a>
            <a class="dropdown-item" href="#">Menu4</a>
            <a class="dropdown-item" href="#">Menu5</a>
            <a class="dropdown-item" href="#">Menu6</a>
            <a class="dropdown-item" href="#">Menu7</a>
            <a class="dropdown-item" href="#">Menu8</a>
        </div>
    </div>
</div>

Related:
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?

I'll look into the popper options... From your example i'm not sure if you understand.. I would like the dropdown menu to appear over the accordion and not within it. On top of everything else. — Bossman, Aug 09 '18 at 12:06

score 0 · Accepted Answer · answered Aug 10 '18 at 11:01

Answering for people who might come from Google with the same issue.

I got a reply on the Bootstrap Git from a contributor and it was pointed out to me that it wasn't the accordion causing this. It's the <div class="table-responsive"> wrapper and the overflow-x: auto. Making this visible corrects this but obviously breaks the responsive scroll on the table.

Currently there is no true fix in this situation, where you have a table within an accordion with dropdown menu's.

Bootstrap 4 dropdown menu within accordion

2 Answers2

Linked