Search code examples
cssangularoverflowngx-bootstrap

ngx-dropdown visibility within table using property overflow visible

I am trying to use the NGX dropdown menu in scrollable table however on the last row the dropdown get's cutoff by the overflow being hidden by default.

hidden dropdown

to overcome this, I set the table-responsive class to have these properties:

.table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

which results it having the desired look however disables my table being scrollable:

dropdownzindexontop

if I remove,

 overflow-x: visible !important;

I get closer to my desired result however I want the dropdown to overflow out of the container, also the contents of the dropdown are initially hidden.

dropdown overflow visible

Is there are a way of having a scrollable table where the dropdown appears like the 2nd 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">
Solution

  • Is this the very last row in the table? Have you tried targeting just the ::nth-last-child selector or if its a NgFor Angular has a last-child you could utilize as well to set a class on the dropdown itself.

    Either way the answer would be to adjust the absolute position of the dropdown menu on the last row. Not to mess with the table styles.

    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

    http://plnkr.co/edit/evR8YKXgvpYWqHgt8zZE?p=preview

    https://github.com/angular/angular/issues/10856