[英]How to fit p-dropdown inside of a table cell?
I'm adding p-dropdown to a p-table similar to what is seen here: https://www.primefaces.org/primeng/#/table/filter我正在将 p-dropdown 添加到类似于此处所见的 p 表中: https : //www.primefaces.org/primeng/#/table/filter
The p-dropdown is overflowing into the next cell. p-dropdown 溢出到下一个单元格。 How can I prevent p-dropdown from flow to the next cell?如何防止 p-dropdown 流到下一个单元格?
I have tried the following:我尝试了以下方法:
- adding [style]="{'width':'100%'}" to p-dropdown element - 将 [style]="{'width':'100%'}" 添加到 p-dropdown 元素
- adding [autoWidth]="true" to the p-dropdown element - 将 [autoWidth]="true" 添加到 p-dropdown 元素
- adding max-width to the p-dropdown element - 将最大宽度添加到 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>
inside the p-dropdown component there is a class .ui-dropdown
this set the min-width
to fixed values 12.5em;
在 p-dropdown 组件内部有一个类.ui-dropdown
12.5em;
min-width
设置为固定值12.5em;
so if you set the min-width to 0
or initial
will solve the problem因此,如果您将 min-width 设置为0
或initial
将解决问题
style.scss样式文件
.base-table {
p-dropdown {
.ui-dropdown {
min-width:0;
}
}
}
or like this will reset the min-width for p-dropdown
component in the all project或者像这样将重置所有项目中p-dropdown
组件的最小宽度
p-dropdown {
.ui-dropdown {
min-width:0; // auto , initial 😀
}
}
您可以将min-width:100%
添加到 p-dropdown 元素:
<p-dropdown [style]="{'width':'100%','min-width':'100%'}" *ngSwitchCase="'invoice_status'" [options]="statuses" [autoWidth]="true"></p-dropdown>
Use this it might solve your problem使用它可能会解决您的问题
<p-dropdown *ngSwitchCase="'status'" [options]="order_status" [style]="{ width: '100%', overflow: 'visible' }" appendTo="body"
(onChange)="dt.filter($event.value, retailer.field, 'equals')"></p-dropdown>
If someone comes in handy I will be glad:如果有人派上用场,我会很高兴:
p-table { ::ng-deep p-dropdown { .ui-dropdown { min-width: 0; } } }
You must put th in a tr tag:您必须将 th 放在 tr 标签中:
See Prime Ng Filter Example from Site:请参阅来自站点的 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);
}
}
and html File:和 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>
You can add appendTo="body" property to p-dropdown.您可以将appendTo="body"属性添加到 p-dropdown。 It will fix the issue if you have your dropdown inside the p-table body, without changing any CSS.如果您在 p-table 主体中有下拉列表,它将解决该问题,而无需更改任何 CSS。
AppendTo target element to attach the overlay in primeNG p-dropdown 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.