PrimeNG drop-down component drops behind other components instead of over other components

[Letholdrus]

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:

Code: Select all

<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.