CODEWITHSUNDEEP
javascriptcssangularjsangular
Khaled Al-Ansari
Khaled Al-Ansari

Reputation: 3970

How to start a new row in Angular 2 templat

I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs

<div class="blocks">
  <div router-active class="block" *ngFor="let item of items">
    <div class="inblock">
      <p class="title">{{ item.name }}:</p>
    </div>
  </div>
</div>

Everything is working fine but if one of the div height was higher than the others it would look something like the image below

The wrong display of the blocks

I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!

UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue

Upvotes: 0

Views: 122

Answers (2)

tmutton
tmutton

Reputation: 1101

You will find a solution using css. Take this code:

.block {
    float: left;
    width: 150px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.block:nth-child(3n+4){
  border: 1px solid red;
  clear: both;
}

The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.

Upvotes: 3

Ravinder Kumar
Ravinder Kumar

Reputation: 752

Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.

Upvotes: 0

Related Questions