I am currently integrating PrimeNG components into my Angular 5 project. On the landing page, I have specific requirements such as column resizing and filter pop-ups.
The pop-up displays correctly on the table without using the pResizableColumn class. However, when I apply the resize column class, the pop-up is confined to that header column only, hiding the rest of the content due to the relative positioning used by pResizableColumn.
I'm looking for a way to display the pop-up with the column resize functionality enabled. If anyone has any insights on this issue, please assist me.
The images below illustrate the situation:
Properly displayed pop-up
https://i.sstatic.net/M1T8Z.png
Pop-up hidden when the resize column feature is implemented
https://i.sstatic.net/5ByUc.png
file.html
<div class="card-body" style="padding:0">
<div class="tab-content">
<div role="tabpanel" class="landing-table tab-pane active" id="all_cases">
<p-table (click)="hideFilterPopup()" (scroll)="hideFilterPopup()" #dt [columns]="cols" [value]="fetchCases" [totalRecords]="totalRecords"
[rows]="10" [(selection)]="selectedTableRow" [resizableColumns]="true" dataKey="ticketRef" (onRowSelect)="openDetailsAndView($event.data.ticketRef)"
[scrollable]="true" scrollHeight="350px" [style]="{width:'100%'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col style="width:30px">
<col style="width:150px">
<col *ngFor="let col of columns" style="width:150px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns let-fetchCases>
<tr>
<th style="width:30px"></th>
<th id="case_reference" pResizableColumn>Ticket Reference
<span class="lnr lnr-funnel"></span>
<p-sortIcon [pSortableColumn]="fetchCases.ticketRef" [field]="fetchCases.ticketRef" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order"
ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
</th>
<th *ngFor="let col of columns" pResizableColumn>
{{col.title}}
<p-sortIcon [pSortableColumn]="col.mapper" [field]="col.mapper" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order"
ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
<div class="inlineFilters" [ngClass]="selectedFilter === col.title ? 'displayBlock' : 'displayNone'">
<div class="row marginZro">
<input class="col-sm-12 inlineInput" type="text" placeholder="Filter...">
<button class="col-sm-6 btn btn-stable">Search</button>
<button class="col-sm-6 btn btn-stable">Clear</button>
</div>
</div>
<span class="lnr lnr-funnel" (click)="opeenFilter(col.title)"></span>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-fetchCases let-columns="columns">
<tr [pSelectableRow]="fetchCases">
<td style="width:30px">
<p-tableCheckbox [value]="fetchCases"></p-tableCheckbox>
</td>
<td class="caseRefLink ui-resizable-column" (click)="openHandlingTab(fetchCases)">
<div class="extentedNotes" title="{{fetchCases.ticketRef}}">{{fetchCases.ticketRef}}</div>
</td>
<td *ngFor="let col of columns" class="ui-resizable-column">
<div class="extentedNotes" title="{{fetchCases[col.field]}}" [ngClass]="{'timeLeftCol':(col.mapper == 'timeLeft'),
'rag-status-green':(col.mapper == 'timeLeft' && fetchCases['rag'] == 'Green'),
'rag-status-red':(col.mapper == 'timeLeft' && fetchCases['rag'] == 'Red'),
'rag-status-yellow':(col.mapper == 'timeLeft' && fetchCases['rag'] == 'Amber')}">{{fetchCases[col.mapper]}}</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<p-paginator *ngIf="totalRecords > 10" [rows]="10" [totalRecords]="totalRecords" [first]="first" (onPageChange)="loadTicketDetailsLazy($event)"></p-paginator>
</div<component.ts
opeenFilter(selectedFilter){
event.stopPropagation()
if(this.selectedFilter == selectedFilter) {
this.selectedFilter = "";
}else {
this.selectedFilter = selectedFilter;
}
}
hideFilterPopup(){
if(this.selectedFilter != ""){
this.selectedFilter = "";
}
}style.css
.inlineFilters {
position: absolute;
z-index: 2;
padding: 5px;
background: #EFEFEF;
border-radius: 5px;
max-width: 15%;
}
.inlineFilters .inlineInput {
margin-bottom: 5px;
}
.inlineFilters button {
padding: 0 !important;
}