通过PrimeNG Table与resize列一起使用时，弹出框不显示在外面

Question

我正在Angular 5项目中使用PrimeNG组件。在我的着陆中，我有一些要求，例如调整大小列和过滤器（弹出）。

在没有使用调整大小列类pResizableColumn的情况下，弹出窗口正确显示在表上。但是，当我使用调整大小列类时，弹出窗口仅限于该标题列，其余部分隐藏了这一点，因为pResizableColumn使用的是相对位置。

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

在“图片下方”清楚地显示了节目。

Popu显示正常

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

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 类的位置，并将 absolute 替换为 fixed ：

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