Clash Royale CLAN TAG#URR8PPP

Bootstrap 4 dropdown menu within accordion

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>

2 Answers
2

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.

popper.js

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

data-boundary="parent" data-flip="false"

dropdown-menu-right

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?

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.

<div class="table-responsive">

overflow-x: auto

visible

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.