Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Grid System inside of a looping Angular 2+

SMoto R (SuperMotoRiders) free asked 7 years ago


Hello there, I have an issue with the gridSys when i make the loop, he display play me vertical item instead of horizontal item list. <section class="section pb-3"> <divclass="row" *ngFor="let item of pizza"> <divclass="col-lg-4 col-md-6 mb-r"> <divclass="card card-cascade wider"> <divclass="view overlay hm-white-slight" *ngFor="let img of item.images"> <img [src]="img.imgP"class="img-fluid"alt=""> <a> <divclass="mask waves-effect waves-light"mdbRippleRadius></div> </a> </div> <divclass="card-body text-center no-padding"> <h4class="card-title"><strong><ahref="">{{item.name}}</a></strong></h4> <pclass="card-text">{{item.description}}</p> <divclass="card-footer"> <spanclass="left">39$</span> </div> </div> </div> </div> </div> </section> thanks, sorry for my english.

Damian Gemza staff answered 7 years ago


Hello, I've changed your's code little bit. Now it works perfectly.  Please read carefully my code so that next time you will know how to implement that layout.
<div class="row">

<div *ngFor="let item of pizza" class="col-lg-4 col-md-6 card">

<div class="card card-cascade wider" *ngFor="let img of item.images">

<div class="view overlay hm-white-slight">

<img [src]="img.imgP" class="img-fluid" alt="">

<a>

<div class="mask waves-effect waves-light "mdbRippleRadius></div>

</a>

</div>

<div class="card-body text-center no-padding">

<h4 class="card-title">

<strong>

<a href="">{{item.name}}</a>

</strong>

</h4>

<p class="card-text">{{item.description}}</p>

<div class="card-footer">

<span class="left">39$</span>

</div>

</div>

</div>

</div>

</div>
Best Regards, Damian

SMoto R (SuperMotoRiders) free commented 7 years ago

Thanks a lot Damian. Works!!!

Damian Gemza staff answered 7 years ago


Hello, Could you send me your's project @ d.gemza@mdbootstrap.com ? I cannot reproduce your's error. Best Regards, Damian

SMoto R (SuperMotoRiders) free commented 7 years ago

This is a small example and don't works, again list view is vertical: <div> <div><div class="block" *ngFor="let item of pizza"></div> <div><div *ngFor="let img of item.images"></div> <div><divclass="col-lg-4 col-md-6"></div> <div><ulclass="list"></div> <div><li></div> <div><imgstyle="max-width: 100%" [src]="img.imgP"alt=""></div> <div></li></div> <div><li>{{item.name}}</li></div> <div></ul></div> <div></div></div> <div><div></div> <div><div></div> </div> copy paste list of cards then make a loop inside angular and you will see dosen't work.....

SMoto R (SuperMotoRiders) free commented 7 years ago

Here is my project, Thanks. https://we.tl/2u69ACzSZ4


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags