CODEWITHSUNDEEP
cssangularprimeng
AndreaNobili
AndreaNobili

Reputation: 42957

Why I can't change the background color of a PrimeNG orderlist component via CSS into my Angular application?

I am using on an Angular application using PrimeNG into my project and I am finding some difficulties trying to override the CSS of a PrimeNG component.

In particular I have an orderlist like this:

enter image description here

As you can see the selected item have blue as default background color. I am trying to change it to gray but it is not working.

This is my HTML code of my entire component view:

<p-selectButton [options]="workShiftTypes" [(ngModel)]="selectedShift" optionLabel="name"></p-selectButton>
<p>Selected Work Shift: {{selectedShift ? selectedShift.value : 'none'}}</p>

<div class="custom_sift" *ngIf="selectedShift.value == 'custom'">
  <app-custom-event-date-selector
                (notifyStartEndTime)="onChangeCustomShiftDate($event)">
  </app-custom-event-date-selector>
</div>

<div #draggable_people>

  <p-orderList [value]="people" [listStyle]="{'height':'400px'}" header="People"
    filter="filter" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true">
    <ng-template let-person pTemplate="item">
        <div class="ui-helper-clearfix fc-event" style="background-color: transparent; color:black !important;border: 0px !important;">
          <div class="container">
            <div class="row">
              <div class="col-sm">
                <img src="assets/img/people/person-icon.png" style="display:inline-block;float: left; margin:2px 20px 2px 2px" width="48">
                <div style="font-size:14px;margin:15px 5px 0 0">{{person.name}}</div>
              </div>
              <div class="col-sm">
                <div class="people-operations-icons">
                  <button class="btn" (click)="onClickFilter(person, $event)">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>


        </div>
    </ng-template>
  </p-orderList>
</div>

The list is rendered inside this tag: <p-orderList [value]="people" [listStyle]="{'height':'400px'}" header="People"

Chrome developer tool show this:

enter image description here

So into my component CSS file (that is correctly imported into my component .ts class) I put:

body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
  background-color: grey !important;
}

to override the default blue color defined into the theme.css file. But it is not working. Selecting an item it still remain blue and not grey.

What could be wrong? What am I missing? How can I try to fix this issue?

Upvotes: 1

Views: 8031

Answers (1)

user1844923
user1844923

Reputation: 179

As long as you don't have this classes in template: ".ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight", you can't access them from a template-component.css

For this situation you need a global/theme css file that overrides the styles from PrimeNG.

Or you can use deprecated selector ::ng-deep

:host ::ng-deep .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
  background-color: grey !important;
}

Upvotes: 2

Related Questions