How to disable scroll on body when clicking on a p-dropdown within it

Question

I am using few p-dropdown in my table header where I also have a horizontal scroll for it's container. When I click on any of these dropdowns, instead of opening the dropdown panel the body gets scrolled to the right.

What can be done for this?

The html code is as follows.

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

For horizontal scroll I have added this in my scss file.

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

Answer 1

You should try to activate the virtualscroll property on the element ([virtualScroll]="true") and define the scrollHeight of the element