I'm having some issues with a dropdown menu in Bootstrap 4. The problem arises within a table:
https://i.sstatic.net/AbqTX.png
When I click on the settings in the first row, a dropdown appears as expected:
https://i.sstatic.net/xSfli.png
However, when I click on the settings in the second row, the dropdown appears in the same location as the first. How can I resolve this issue?
https://i.sstatic.net/3AtMa.png
You can find the codepen with the same issue here: CodePen
HTML snippet:
<div class="table-responsive">
<table class="table table-hover table-sm">
<thead>
<tr>
<th>Employee Name</th>
<th>Position</th>
<th>Phone</th>
<th>Department</th>
<th>Access Profile</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tflex">
<span class="default-av">hC</span>
<span>Tarnavsky Dmitry Alexeevich</span>
</td>
<td>Developer</td>
<td>+7 (921) 030-33-32</td>
<td>South</td>
<td>Administrator</td>
<td align="center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-cog"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Developer</td>
<td>Moe</td>
<td>+7 (921) 030-33-32</td>
<td>Dooley</td>
<td>+7 (921) 030-33-32</td>
<td align="center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-cog"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action2</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>