I am using PrimeNG components in Angular 5 project. In my landing I have requirements like resize column and filters(pop up).
Pop up is showing correctly on table without using resize column class pResizableColumn. But when I use resize column class, pop up is limited to that header column only, rest of the part is hiding that because that pResizableColumn is using position relative.
I want to show pop up with column resize function, if any one know please help me out.
Below Images is the shows clearly.
Popu up showing proper
Pop up hiding when i use resize column
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;
}