Automatically align a Div to the right within an ngFor directive in an Angular 6 application

Question

Automatically align a Div to the right within an ngFor directive in an 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>

The current layout displays an uneven height in the divs and causes one to be pushed right. It is desired for all the divs to align in the same line. Attempts have been made using CSS clear: both;, but it hasn't resolved the issue. Another approach involved adding a buffer div after every third dynamically created div by calculating modulus. However, this buffer div remains inside the loop and fails to span across all three columns due to its position within the loop. https://i.sstatic.net/wwzKA.png

html css angular twitter-bootstrap

Answer 1

Answer №1

Here's a simple solution to your issue.

The varying heights of your divs are due to text wrapping in some instances:

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

To fix this, just assign a class to the paragraph:

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

Then specify a height for it:

.clientinfo {
  height: 60px;
}

This will standardize the height of all your divs and eliminate the problem completely.

Alternatively, you can utilize an ellipsis overflow:

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

Additionally, make use of the title HTML attribute on the paragraph so that when it is truncated using an ellipsis, users can hover over the text to view the full information.

Answer 2

Here's a simple solution to your issue.

The varying heights of your divs are due to text wrapping in some instances:

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

To fix this, just assign a class to the paragraph:

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

Then specify a height for it:

.clientinfo {
  height: 60px;
}

This will standardize the height of all your divs and eliminate the problem completely.

Alternatively, you can utilize an ellipsis overflow:

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

Additionally, make use of the title HTML attribute on the paragraph so that when it is truncated using an ellipsis, users can hover over the text to view the full information.

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

Answer №1

Similar questions

python selenium style attribute for element

Issue: Unhandled promise rejection: NullInjectorError: R3InjectorError(AppModule)[baseURL]

Implementing JavaScript to assign a symbol to several <span> elements with identical ids

Choose an element by its specific data attribute

Modifying the color of the highlighted selection in a dropdown select box

Adjusting data points on a radar chart.js through user interaction

Using NGRX with Angular's AuthGuard

"Reconfigure web page layout to be perfectly centered

Is it possible to create a WebXR using the ARCore API specifically for IOS devices?

Retrieve the injectable value when importing SubModule into the App Module

I'm experiencing an issue in Angular 2 where I am unable to call a function within another function

The page is present, but unfortunately, the content is displaying a 404 error. I am considering using Selenium to retrieve

Displaying an array value instead of a new value list in a React component

Customize jQuery slideDown animation to have a specific height and handle overflow situations

Compatibility of HTML5 websites with Internet Explorer

A guide to showcasing tabs as a navigation menu based on media size using AngularJS

callbacks in amazon-cognito-identity-js

Using ADAL with ASP.NET MVC and Angular for Seamless Login Experience

Ways to conceal a badge using JavaScript

The directive is dynamically altering the disable attribute of its parent element