Primeng: <p-dropdown> Dropdown Options behind Turbo Table Body

[joshuaballas]

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Any p-dropdown tags inside of Turbo Table's header causes the dropdown options to populate behind the table's body, making it impossible to select anything from the dropdown.

Expected behavior
Dropdown options need to be in front of the table's body.

• Angular version: 5.2.3

• PrimeNG version: 5.2.0

• Browser: All

NOTE: I removed all CSS that does not pertain to PrimeNG to test to see if it was CSS that I added causing this, but this issue was still happening. Here is a code sample:

<p-table [value]="data" [responsive]="true" [paginator]="true" [columns]="columns" [rows]="20" 
   [rowsPerPageOptions]="[20,50,100]" [scrollable]="true" #dt>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th *ngFor="let col of columns" [ngSwitch]="col.field">
        <p-dropdown *ngSwitchCase="'col1'" [options]="sortedData" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
        <input *ngSwitchDefault pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-i="rowIndex" let-columns="columns">
    <tr (click)="rowClick(rowData)" [ngClass]="rowClass(rowData, i)">
      <td *ngFor="let col of columns">{{rowData[col.field]}}</td>
    </tr>
  </ng-template>
</p-table>

Screenshot

[joshuaballas]

Adding position: absolute to p-dropdown fixes this, but of course that will make the dropdown unaware of the column width. Also messes up the y-axis position.

[JacobSiegle]

See https://github.com/primefaces/primeng/issues/4369.

[joshuaballas]

Thank you! The appendTo comment was my fix.