PrimeNG DataView component layout issues with PrimeFlex

Question

I am using a PrimeNG DataView component which says to use PrimeFlex's flex grid CSS classes to create the grid structure.

This is one of their examples, and they say:

In grid mode, the ng-template element should contain a div element as a wrapper with PrimeFlex style class of your choice.

<p-dataView [value]="cars">
    <ng-template let-car pTemplate="listItem">
        <div>
            {{car.id}}
        </div>
    </ng-template>
    <ng-template let-car pTemplate="gridItem">
        <div class="p-col-12 p-md-3">
            {{car.year}}
        </div>
    </ng-template>
</p-dataView>

In my own code I have tried this, see below. After a bit of trying to find out why it wasn't working, I went and checked the PrimeFlex CSS file for the actual .p-grid and .p-col-* stylings and couldn't find anything.

<p-dataView [value]="shows" layout="grid">
  <ng-template pTemplate="header"> List of shows </ng-template>

  <ng-template let-show pTemplate="gridItem">
    <div class="p-col-12 p-md-4">
      <div class="show-grid-item card">
        {{ show.title }}
      </div>
    </div>
  </ng-template>
</p-dataView>

I can't tell why the FlexGrid styles which are documented here: https://www.primefaces.org/showcase/ui/panel/flexGrid.xhtml?jfwid=e9606 are not included in my primeflex.css file.

If I can't get those specific styles, is there a way to make the DataView component just use the regular Grid styles of PrimeFlex?

Answer 1

If you use primeng 12 and primeflex try to add, in your style.css. At least until they update the bug in future versions.

.p-grid {
display: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;

}

This is my html code:

<p-dataView [value]="articuloViewList" layout="grid">
            <ng-template pTemplate="header">
                <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
            </ng-template>
            <ng-template let-art pTemplate="listItem">
                <div>
                    {{art.artName}}
                </div>
            </ng-template>
            <ng-template let-art pTemplate="gridItem" #gridI>
                <div class="col-12 md:col-2">
                    {{art.artNombre}}
                </div>
            </ng-template>
        </p-dataView>