Angular Bootstrap for *ngFor

Question

I'm using *ngFor to get some objects and i want to display them on a webpage.I'm using <div class col-sm-4> for every object.I should have 3 on a row ,but i still have 12 objects and I can't understand why.

HTML:

<div class="display row" *ngFor="let field of fields">
  <div class="col-sm-6">
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button class = "modify">Modify</button>
    <button class="view" onclick="document.getElementById('ViewAll').style.display = 'block'">View all</button>
  </div>
  </div>

CSS:

.display{
    display:inline-block;
    border: 5px solid #1976d2;
    padding: 50px;
    margin: 20px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    border-radius: 15px;
    
}

I believe that the outer div is in loop. So, it is being rendered for each object as a new div. — Eranki
– Eranki, Commented Jul 22, 2020 at 14:25
I tried adding the 'col-sm-4' to the outer div but still doesn't work — Robert Dumbrava
– Robert Dumbrava, Commented Jul 22, 2020 at 14:35

Eranki · Accepted Answer · 2020-07-22 15:34:10Z

Since *ngFor is in outer div, it is rendering new row for each object. Keep it inner div and remove display in css.

<div class="display row" >
  <div class="col-sm-4" *ngFor="let field of fields">
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button class = "modify">Modify</button>
    <button class="view" onclick="document.getElementById('ViewAll').style.display = 'block'">View all</button>
  </div>
</div>

in css:

.display{
border: 5px solid #1976d2;
padding: 50px;
margin: 20px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
border-radius: 15px;

}

Collectives™ on Stack Overflow

Angular Bootstrap for *ngFor

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related