What is the best way to center all items in a vertical list of text?

Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties like Flex, inline, and inline-block. My goal is to have each element start at the same point regardless of differing digit lengths; for example, Apr 1, 2019 1 file 3445 G should line up with Mar 28, 2019 34 files 29282 G.

The elements are within spans classed as jobdate-item-date, jobdate-item-file-total, and jobdate-item-file-length. Clicking on these reveals lists of job data. Here's a visual along with my current code -

HTML -

      <div *ngFor="let date of selectedJob.dates" class="card-date-file">
        <div class="detail-item" (click)="toggle()">
          <span class="jobdate-item-date">{{ date.date | date: 'MMM dd, y' }}</span>
          <span class="jobdate-item-file-total">{{ date.files.length }} files</span>
          <span class="jobdate-item-file-length">{{ jobFileCalc(date.files) }} GB</span>
        </div>
        <ng-container *ngIf="show">
        <div *ngFor="let file of date.files" class="list" >
          <span class="file-item-filename">{{ file.filename }}</span>
          <span class="file-item-incr">{{ file.incr? 'INCR':'FULL' }}</span>
          <span class="file-item-time">{{ file.dttm | date:'h:mm' }}{{ file.dttm | date:'a' | lowercase }}</span>
          <span class="file-item-size">{{ file.sizegb.toFixed(1)| number : fractionSize }} GB</span>
        </div>
        </ng-container>
      </div>
    </div>

CSS -

.jobdate-item-date {
  padding: 0.1em 1.1em 0.3em 0.8em;
}

.jobdate-item-file-total {
  padding: 0.3em 1.1em 0.3em 1.1em;
}

.jobdate-item-file-length {
  padding: 0.3em 1.1em 0.3em 1.1em;
}

Answer №1

To ensure every element has a specific width (I utilized flexbox in my demo), you can truncate any text that is too lengthy with ellipses as needed. Feel free to adjust the widths or utilize percentages to achieve your desired outcome.

.detail-item {
  display: flex;
  padding: 8px;
}

.jobdate-item-date,
.jobdate-item-file-total, 
.jobdate-item-file-length {
  flex: 0 0 100px;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="detail-item" (click)="toggle()">
  <span class="jobdate-item-date">Mar 29, 2019</span>
  <span class="jobdate-item-file-total">12 files</span>
  <span class="jobdate-item-file-length">2280.2 GB</span>
</div>

<div class="detail-item" (click)="toggle()">
  <span class="jobdate-item-date">Apr 3, 2019</span>
  <span class="jobdate-item-file-total">2 files</span>
  <span class="jobdate-item-file-length">99.2 GB</span>
</div>

<div class="detail-item" (click)="toggle()">
  <span class="jobdate-item-date">Apr 3, 2019</span>
  <span class="jobdate-item-file-total">2 files</span>
  <span class="jobdate-item-file-length">324324234234234232423 GB</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access to Firebase using Google authentication is currently restricted (permission denied)

Currently, I am utilizing Firebase to authenticate users with Google in my Angular project, "project1." When signing anonymously into Firebase, everything runs smoothly. However, if I attempt to sign in with Google using the popup feature, an error occurs: ...

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

Switch up the item's background in the dropdown list within Kendo UI Angular

Looking for a solution to highlight text and change background color in a dropdown list based on certain conditions. I searched the official Kendo forum without success. Any guidance or suggestions on how to resolve this issue would be greatly appreciate ...

Setting up an nginx configuration that seamlessly integrates an Angular 4 application and a WordPress blog within the same route

Presumption: The current system is hosted on https://example.com [which is statically served from /home/centos/projects/dist.example.com] My attempt was to set up the path https://example.com/blogs to run a WordPress blog application. This is my conf ...

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

Place picture in the bottom right corner of the div without using absolute positioning

I am looking for a way to position an image in the lower right corner of a div, but I want to avoid using absolute positioning. The reason for this is that when I use absolute positioning, the text wrap is affected due to the float right applied to the ima ...

Angular (Ionic): Updating component view with loop does not refresh

When utilizing *ngFor to repeat a component multiple times, the components displayed are not updating in the DOM as expected. Displaying the component within an ionic page: <ion-row *ngFor="let file of files; let i = index"> <app-add ...

Is there a way to specifically choose the initial element using Angular? "Backend powered by Django"

Hi there! I've set up Django on the back-end to send data to Angular, and I'm trying to display only the first comment from a list in my HTML page. However, when using limitTo, I encountered this error: Failed to compile. src/app/app.component. ...

Can the NgModule objects be imported from an external file?

One of my goals is to streamline the organization of my app by putting everything into logical files. I frequently do this in C#. Is there a way to extract declarations into a separate file and then assign the value to the declarations variable on NgModule ...

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

Utilizing Angular with the development environment of Visual Studio 2015

Having trouble setting up my angular 2 application in visual studio 2015 (with update 1). The typescript compile is throwing an error - it says 'Cannot find module '@angular/core' at import { NgModule } from '@angular/core';. I eve ...

Challenge involving Angular for creating multiline innerHtml contentEditable feature

I am currently working on a project using Angular5 to create a unique type of "text-editor" utilizing div elements with the contenteditable property. This setup allows users to input plain text, but also enables them to select specific text and trigger an ...

Error in Layout of Navigation Panel and Tabbed Pages

Working on a school project, I encountered a challenge. I found two useful solutions from the W3 website - a sticky navigation bar and the ability to include tabs on a single page for a cleaner presentation of information. However, when trying to implement ...

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

Ways to customize the appearance of a search box

I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...

When jQuery fails to detach() due to the presence of an input tag

I have a situation where I am trying to rearrange elements within a table. Everything works fine, until I introduce a tag, which triggers this error message:</p> <pre><code>Error: this.visualElement is undefined Source File: http://192. ...

Issue with Internet Explorer's CSS

It appears that this page is not displaying correctly in Internet Explorer 9, along with possibly older versions as well. The issue seems to be with the right menu floating to the bottom of the page. Firefox, Chrome, and Safari are all rendering it correct ...

Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...