Odtnhj

Good day

I recently moved from PrimeFaces to PrimeNG.

However I run into the error whereby my drop-down drops behind the component below it instead of over / on top of it.

Here is a screenshot:

This is my code:

<div class="box">
 <form [formGroup]="projectForm" (submit)="submit()">
 <h3>Create New Project</h3>
 <br/>
 <div class="table-responsive">
 <table class="table table-bordered table-sm w-auto">
 <tbody>
 <tr>
 <td>
 <b>Project Leader: </b>
 </td>
 <td>
 <p-dropdown [options]="employees" [(ngModel)]="project.leader" [filter]="true"
 optionLabel="fullNames" placeholder="Select an Employee" [appendTo]="body"
 formControlName="leader" [style]="width: 'auto'">
 <ng-template let-itemData pTemplate="selectedItem">itemData.value.preferredName
 itemData.value.lastName
 </ng-template>
 <ng-template let-itemData pTemplate="item">itemData.value.preferredName
 itemData.value.lastName
 </ng-template>
 </p-dropdown>
 </td>
 </tr>
 <tr>
 <td>
 <b>Project Name: </b>
 </td>
 <td>
 <input pInputText [(ngModel)]="project.name" formControlName="name" style="width: 100%"
 size="100">
 </td>
 </tr>
 <tr>
 <td>
 <b>Rate Table: </b>
 </td>
 <td>
 <p-dropdown [options]="projectRateTables" [(ngModel)]="selectProjectRate" [filter]="true"
 [style]="width: 'auto'" [appendTo]="body"
 optionLabel="name" placeholder="Select a Rate Table"
 formControlName="projectRateTable">
 </p-dropdown>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <button pButton type="submit" label="Submit" icon="fa fa-save"
 style="float: right">
 </button>
 </form>
</div>

How can I fix it so that this does not happen? Then a separate somewhat related question, what is the PrimeNG equivalent of the PrimeFaces panelGrid component. The reason I am using Bootstrap tables to create the forms is due to not finding a panelGrid equivalent for PrimeNG.

Thanks in advance.