Bootstrap Dropdown menu doesn't pop out of responsive table

So I am running in to an issue where I have multiple Bootstrap dropdown menus that appear onClick within a Bootstrap responsive table. However these dropdown menus are supposed to overflow the table and appear on top. I have found some solutions to this issue say that setting overflow-x to visible and overflow-y to visible for the responsive table, however, in my case I need overflow-x to be auto so that the table doesn't bleed over the edge of the page. Overflow-y helps a bit, as it allows me to scroll to see the rest of the dropdown, but this isn't ideal due to table filtering making the table smaller

dropdown supposed to appear overtop

here is the layout of the HTML utilizing the Bootstrap classes:

<div class="wrapper">
<div class="table-responsive table-bordered">
<!--scroll -->
<table class="table table-responsive table-striped table-hover table-condensed no-margins">
<!-- data-anchor -->
<thead>
<!-- COLUMNS -->
<tr>
<th>
//stuff removed for brevity
</th>
</tr>
<tr>
<th>
//stuff removed for brevity
</th>
</tr>
</thead>
<tbody>
<!-- | filterlantFilterInput as results -->
<!-- FIXMEAGINATION -->
<tr>
<td *ngIf="hasActions">
<span>
<div class="btn-group btn-sm simple-dropdown" appClickDropdown>
<button>
Actions
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
//Items
</ul>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>


*I removed some of the HTML content for brevity, it is just the list items and such for some dropdowns and table content.

And here is some of the modified CSS:

.dropdown {
position: relative;
}

.scrollable-dropdown.dropdown-menu {
position: absolute;
transform: translate(-3%, 7%);
}

.dropdown-menu {
position: absolute;
transform: translate(5.5%, -9%);
z-index: 99999;
}

.show {
display: block;
}

.disp-inline {
margin-bottom: 2rem;
}
.wrapper{
overflow-y: visible;
overflow-x: visible;
}
.table-responsive {
overflow-y: visible !important;
}


I have tried setting the overflow-x value to visible, which does have the dropdowns appear over the table, except now the table is no longer responsive. I also tried setting the dropdown position to absolute instead of relative which just placed all dropdowns below the table which isn't what I am looking for. I also tried adding a wrapper div and applying the overflow values to that div or to the tables inside and was left with similar results as previous.

Continue reading...