How do I enable Grid layout at primeng dataview

212 Views Asked by At

I'm trying to use dataview component from primeng, I've imported the module successfully, installed primeflex and read the documentation but when i try to use the grid layout it doesn't work and only shows the items in a vertical line, I've tried to solve the problem using chrome inspect tool and tried to update the styles from the component CSS file but it didn't work also, I've checked whether this CSS file is accessible or not and it has no problem at this point the problem is that when i try to give the .grid class a flex display for example it doesn't affect the view at all this is the html code

<div class="container" *ngIf="topProducts != null">
        <div>
            <p-dataView #dv [value]="topProducts" layout="grid" class="p-dataview">
                <ng-template let-prod pTemplate="gridItem">
                    <div class="col-12 md:col-4" style="width: fit-content;">
                        <app-product [product]="prod"></app-product>   
                    </div>
                </ng-template>
            </p-dataView>
        </div>
    </div>

I think the problem related to primeflex ,when I installed it using npm i primflex it was installed successfully but didn't affect the dataview module at all I'm using primeng 15.2.0 and primeflex 3.3.0

0

There are 0 best solutions below