如何在表格單元格內放置 p-dropdown？

Question

我正在將 p-dropdown 添加到類似於此處所見的 p 表中： https : //www.primefaces.org/primeng/#/table/filter

p-dropdown 溢出到下一個單元格。 如何防止 p-dropdown 流到下一個單元格？

我嘗試了以下方法：
- 將 [style]="{'width':'100%'}" 添加到 p-dropdown 元素
- 將 [autoWidth]="true" 添加到 p-dropdown 元素
- 將最大寬度添加到 p-下拉元素

<p-table [columns]="cols" [value]="wfdata" [paginator]="true" [rows]="10">

...

<th *ngFor="let col of cols" [ngSwitch]="col.value">
          <p-dropdown *ngSwitchCase="'invoice_status'" 
                    [options]="statuses" 
                    [autoWidth]="true"
                    [style]="{'width':'100%'}"></p-dropdown>

...

</p-table>

Answer 1

在 p-dropdown 組件內部有一個類.ui-dropdown 12.5em; min-width設置為固定值12.5em; 因此，如果您將 min-width 設置為0或initial將解決問題

樣式文件

.base-table { 
  p-dropdown {
    .ui-dropdown {
      min-width:0;
    }
  }
}

或者像這樣將重置所有項目中p-dropdown組件的最小寬度

 p-dropdown {
    .ui-dropdown {
      min-width:0; // auto , initial 😀
    }
  }

演示🔥🔥

Answer 2

您可以將min-width:100%添加到 p-dropdown 元素：

<p-dropdown [style]="{'width':'100%','min-width':'100%'}" *ngSwitchCase="'invoice_status'" [options]="statuses" [autoWidth]="true"></p-dropdown>

Answer 3

使用它可能會解決您的問題

  <p-dropdown *ngSwitchCase="'status'" [options]="order_status" [style]="{ width: '100%', overflow: 'visible' }" appendTo="body"
          (onChange)="dt.filter($event.value, retailer.field, 'equals')"></p-dropdown>

Answer 4

如果有人派上用場，我會很高興：

 p-table { ::ng-deep p-dropdown { .ui-dropdown { min-width: 0; } } }

Answer 5

您必須將 th 放在 tr 標簽中：

請參閱來自站點的 Prime Ng 過濾器示例：

export class TableFilterDemo implements OnInit {

    cars: Car[];

    cols: any[];

    brands: SelectItem[];

    colors: SelectItem[];

    yearFilter: number;

    yearTimeout: any;

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars = cars);

        this.brands = [
            { label: 'All Brands', value: null },
            { label: 'Audi', value: 'Audi' },
            { label: 'BMW', value: 'BMW' },
            { label: 'Fiat', value: 'Fiat' },
            { label: 'Honda', value: 'Honda' },
            { label: 'Jaguar', value: 'Jaguar' },
            { label: 'Mercedes', value: 'Mercedes' },
            { label: 'Renault', value: 'Renault' },
            { label: 'VW', value: 'VW' },
            { label: 'Volvo', value: 'Volvo' }
        ];

        this.colors = [
            { label: 'White', value: 'White' },
            { label: 'Green', value: 'Green' },
            { label: 'Silver', value: 'Silver' },
            { label: 'Black', value: 'Black' },
            { label: 'Red', value: 'Red' },
            { label: 'Maroon', value: 'Maroon' },
            { label: 'Brown', value: 'Brown' },
            { label: 'Orange', value: 'Orange' },
            { label: 'Blue', value: 'Blue' }
        ];

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
    }

    onYearChange(event, dt) {
        if (this.yearTimeout) {
            clearTimeout(this.yearTimeout);
        }

        this.yearTimeout = setTimeout(() => {
            dt.filter(event.value, 'year', 'gt');
        }, 250);
    }
}

和 html 文件：

<p-table #dt [columns]="cols" [value]="cars" [paginator]="true" [rows]="10">
    <ng-template pTemplate="caption">
        <div style="text-align: right">        
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
            <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
        </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'vin'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <div *ngSwitchCase="'year'">
                    Value < {{yearFilter}}
                    <i class="fa fa-close" (click)="yearFilter=null;dt.filter(null, col.field, col.filterMatchMode)" style="cursor:pointer" *ngIf="yearFilter"></i>
                    <p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onChange)="onYearChange($event, dt)"></p-slider>
                </div>
                <p-dropdown *ngSwitchCase="'brand'" [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
                <p-multiSelect *ngSwitchCase="'color'" [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Answer 6

您可以將appendTo="body"屬性添加到 p-dropdown。 如果您在 p-table 主體中有下拉列表，它將解決該問題，而無需更改任何 CSS。

AppendTo目標元素以在primeNG p-dropdown 中附加覆蓋

</p-table>
      ......
  <ng-template pTemplate="body" let-rowData>
    <tr>
       <td>
          <p-dropdown .... [options]="statuses" appendTo="body"></p-dropdown>
       </td>
    </tr>
  </ng-template>
</p-table>