Prime Community Forum

Posted: **17 May 2019, 16:48**

Hi,

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>

We are using the theme "Blue - Amber", and the CSS that is affecting this component, for this theme is the theme-blue.css,
specifically the following passage:

Code: Select all

body .ui-widget-header {
    background-color: #1976d2;
    color: #FFFFFF;
    border: 1px solid #1976d2;
}

We are using the following versions:
- 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?

Posted: **24 May 2019, 14:56**

Hi,
We fixed for next release but you can add the below code in your stylesheet or override file (src/assets/sass/overrides/_theme_styles) until release;

Code: Select all

body {
    .ui-dropdown {
        .ui-dropdown-label {
            &.ui-inputtext {
                color: $textColor;
            }
        }
    }
}

Prime Community Forum

rowsPerPageOptions display dropdown option selected text with color white

rowsPerPageOptions display dropdown option selected text with color white

Re: rowsPerPageOptions display dropdown option selected text with color white