在使用PrimeNG表调整大小列时，弹出不显示在外部

Question

我正在使用PrimeNG组件在角5项目。在我的着陆，我有要求，如调整大小的列和过滤器(弹出)。

弹出在表上正确显示，而不使用调整大小的列类pResizableColumn。但是，当我使用“调整大小列”类时，弹出仅限于该标头列，该部件的其余部分将隐藏这一点，因为该pResizableColumn使用的是相对位置。

我想显示弹出列调整大小的功能，如果有人知道，请帮助我。

下面的图片是清楚的显示。

弹出显示正确

​

​

当我使用调整大小列时弹出隐藏

​

​

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

​

Answer 1

更改inlineFilters类的位置，并将绝对值替换为fixed：

.inlineFilters {
    position: fixed;
    z-index: 2;
    padding: 5px;
    background: #EFEFEF;
    border-radius: 5px;
    width: 188px;
}