We are trying to use the rowsPerPageOptions in a p-table component.
However .css is adding the class .ui-widget-header, on the label it displays
the value selected in the generated dropdown, and this causes it to be set to white as the font color (#FFFFFF) in that way
it does not read the selected value because there is a white text on a white background.
We are using the rowsPerPageOptions this way:
Code: Select all
<p-table
[columns]="cols"
[value]="cars1"
selectionMode="single"
dataKey="vin"
[(selection)]="selectedCar"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[2,5,10,20]"
[responsive]="true"
paginatorPosition="bottom">
<ng-template pTemplate="caption">
List of Cars
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</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>
specifically the following passage:
Code: Select all
body .ui-widget-header {
background-color: #1976d2;
color: #FFFFFF;
border: 1px solid #1976d2;
}
- Barcelona PrimeNG: "7.0.0",
- Angular : "7.0.0",
Has anyone else identified this same problem?
We would like to know if this is already being adjusted directly in the theme, and will it be available in some new version?