rowsPerPageOptions display dropdown option selected text with color white

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
elisiara
Posts: 1
Joined: 17 May 2019, 15:27

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?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

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;
            }
        }
    }
}

Post Reply

Return to “Barcelona - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests