My table header contains multiple p-dropdown elements along with a horizontal scroll for the container. However, when I click on any of these dropdowns, instead of opening the dropdown panel, the body gets scrolled to the right.
What could be causing this issue?
This is the HTML code snippet:
<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>
To implement horizontal scrolling, the following CSS rule was added to the SCSS file:
.p-datatable-wrapper {
width: 260%;
}