Div автоматически сдвигается вправо внутри директивы ngFor в приложении angular 6

Question

<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>

Это результирующее изображение. Высота Div неравномерна, поэтому div был сдвинут вправо. Я хочу, чтобы это было в одной строке. Я попробовал CSS clear: both; Это не помогает. Я попытался добавить буфер div после третьего созданного div, рассчитав мод. <div *ngIf="i%3 == 0" style="position: absolute;column-span:inherit; height: 10px; border: solid; bottom: 0; right: 0; left: 0; "> Но проблема в том, что это внутри цикла. поэтому он не может охватить все столбцы базы данных для этого буфера div.

Answer 1

Здесь довольно простое исправление.

У вашего div разные высоты, потому что иногда этот текст переносится:

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

Так что просто добавьте класс к этому абзацу:

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

Затем добавьте к нему высоту:

.clientinfo {
  height: 60px;
}

Это обеспечит одинаковую высоту всех ваших дивов и исключит проблему.

В качестве альтернативы просто используйте многоточие:

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

Также используйте атрибут HTML title в абзаце, чтобы при его усечении многоточием пользователь мог наводить курсор на текст, чтобы увидеть полную информацию.