PrimeNG p-dataview hide header

Question

I am writing a PrimeNG application which includes a "p-dataview" element. I am trying to hide the header using the component CSS as shown below.

HTML SNIPPET

<p-dataView [value]="cbItems" layout="grid">
 <ng-template let-item pTemplate="gridItem">
   <div class="ui-g-12 ui-md-6" >
    <p-checkbox label={{item.value}}></p-checkbox>
   </div>
 </ng-template>
</p-dataView>

CSS SNIPPET

.ui-dataview .ui-dataview-header {
  display: none;
}

If I "inspect" the p-dataview header element in Chrome (Styles) i can see an entry for .ui-dataview .ui-dataview-header {}. If edit this in the CHROME and add "display:none", it works.

.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

I just can't figure out how to do the same in my source file(s). I'm sure this is more a reflection of my novice CSS skills. Any help would be appreciated.

Answer 1

if you put the custom style in global style file will work

style.css

.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

but the problem with the solution above 👆 is going to apply to p-dataview component in the whole project , primeng provide a solution by add a custome class then apply the stlye as the custom class is the parent class like this

template

<p-dataView styleClass="dataview-grid" [value]="cars" layout="grid">
 <ng-template let-item pTemplate="gridItem">
   <div class="ui-g-12 ui-md-6" >
    <p-checkbox label={{item.value}}></p-checkbox> {{item.brand}} , {{item.year}}
   </div>
 </ng-template>
</p-dataView>

style.css

.dataview-grid.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

demo 🚀🚀