Cómo desactivar el desplazamiento en el cuerpo al hacer clic en un p-dropdown dentro de él.

Estoy usando p-dropdown en el encabezado de mi tabla donde también tengo un desplazamiento horizontal para su contenedor. Cuando hago clic en cualquiera de estos dropdowns, en lugar de abrir el panel del dropdown, el cuerpo se desplaza hacia la derecha.

¿Qué se puede hacer para solucionar esto?

El código html es el siguiente:

<p-table #dt="" [value]="data" rowgroupmode="rowspan"> 
   <ng-template let-col="" ptemplate="header">
        <th *ngfor="
              let colHeading of columnHeading;
              let i = index;
              let isEven = even
            " [style]="{
              width: colHeading.width + '%',
              'border-bottom': '1px solid #999999'
            }"> colHeading['value'] 
          <p-dropdown id="{{ colHeading['value'] }}" *ngif="
                  colHeading.filterType == 'select' &&
                  colHeading['value'] != 'status'
                " [options]="colHeading['filterValue']" (onchange)="search()">
                </p-dropdown>
    </th>
</ng-template>
</p-table>

Para el desplazamiento horizontal, he agregado esto en mi archivo scss.

.p-datatable-wrapper {
width: 260%;
}