I am experiencing an issue with the NGX dropdown menu within a scrollable table. The problem arises on the last row, where the dropdown is cut off due to the overflow being hidden by default.
https://i.sstatic.net/2JfUY.png
To address this issue, I applied the following properties to the table-responsive class:
.table-responsive {
overflow-x: visible !important;
overflow-y: visible !important;
}
This fixed the appearance of the dropdown but disabled the scrolling functionality for the table:
https://i.sstatic.net/zxR35.png
If I remove:
overflow-x: visible !important;
I get closer to my desired outcome, but I want the dropdown to overlap outside the container, and initially show its contents.
https://i.sstatic.net/KeV7f.png
Is there a way to achieve a scrollable table while having the dropdown display like in the second image?
<div class="table-responsive">
<table class="table table-bordered table-hover">
<div class="btn-group" dropdown>
<button class="btn btn-link" dropdownToggle>
<em class="fas fa-ellipsis-v fa-lg"></em>
</button>
<div *dropdownMenu class="dropdown-menu animated fadeInRight" role="menu">
<a [routerLink]="['/folder/editor', row[column.name]]" class="dropdown-item">
<em class="fas fa-fw fa-pencil-alt mr"></em>
<span>View/Edit</span>
</a>
<div class="dropdown-divider"></div>
<a [routerLink]="" (click)="openTransferLogModal(row[column.name])" class="dropdown-item">
<em class="fas fa-fw fa-list-ul mr"></em>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">