CODEWITHSUNDEEP
htmlcssangulartwitter-bootstrap
CodeConstruct
CodeConstruct

Reputation: 414

Div pushed to right automatically inside ngFor Directive in angular 6 application

<div class="row">
  <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i">
    <!-- small box -->
    <div class="small-box bg-dashboard-box" >
      <div class="inner">
        <div class="text-black">
          <h4>{{client.clientName}}</h4>
          <p>{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p> 
        </div> 
      </div>
      <a (click)="onClientClick(client)" class="small-box-footer">
        Users<i class="fa fa-arrow-circle-right"></i>
      </a>
    </div>

This is the resulting image. Div height is uneven that's why a div has been pushed right. I want that it should be in the same line. I have tried css clear: both; It is not helping. I tried adding buffer div after third created div by calculating mod. <div *ngIf="i%3 == 0" style="position: absolute;column-span:inherit; height: 10px; border: solid; bottom: 0; right: 0; left: 0; "> But problem is that its inside the loop. so it is not able span all thre columns for this buffer div. enter image description here

Upvotes: 1

Views: 264

Answers (1)

danday74
danday74

Reputation: 57026

There is a fairly simple fix here.

Your div's are different heights because sometimes this text wraps:

<p>{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p>

So just add a class to this paragraph:

<p class="clientinfo">{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p>

Then add a height to it:

.clientinfo {
  height: 60px;
}

This will ensure all your divs are the same height and avoid the problem altogether.

Alternatively, just use an ellipsis overflow:

.clientinfo {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Also use the title HTML attribute on the paragraph so when it is truncated with an ellipsis the user can hover on the text to see the full info.

Upvotes: 1

Related Questions