The Challenge
In my task, I am dealing with a list featuring two columns. The issue that I am encountering is the desire for the left column to begin precisely where the longest column on the left ends. Presently, it initiates directly after the first column.
What steps should be taken to ensure that the second column commences where the longest section of the first one concludes?
https://i.sstatic.net/NiM3L.png
Current Appearance vs Desired Outcome
Attempts Made
I attempted incorporating row-fluid utilizing col for the initial column and col my-auto for the concluding column. In doing so, the alignment appeared accurate on moderate-sized screens. However, when viewed on smaller devices like cell phones, the text overlapped, whereas on larger screens, there was excessive spacing between them.
Snippet from code in The code section
<div class="row fluid">
<div class="col">
<label id="key" for="object.key"><b>{{object.key}}:</b></label>
</div>
<div class="col my-auto">
<label id="object.key">{{object.value}}</label>
</div>
</div>
I made an attempt to consult the documentation available at https://getbootstrap.com/docs/4.0/utilities/flex/, but unfortunately, was unable to pinpoint a solution to rectify my particular problem.
The Code
I created a basic Angular component called Two Column Array. Within this setup, I employed Bootstrap for formatting purposes. The main concept here is to dynamically display a list of information within a card layout.
HTML
<ng-container>
<div class="card">
<div class="card-header">
<div class="card-fluid" *ngFor="let object of ListObjects" ng-class-odd='odd'>
<div class="d-flex">
<div class="mt-1">
<label id="key" for="object.key"><b>{{object.key}}:</b></label>
</div>
<div class="mt-1">
<label id="object.key">{{object.value}}</label>
</div>
</div>
</div>
</div>
</div>
</ng-container>
Ts
import { Component, Input, OnInit } from '@angular/core';
import { ListTwoColumnObject } from '@models/list-two-column';
@Component({
selector: 'app-two-column-list',
templateUrl: './two-column-list.component.html',
styleUrls: ['./two-column-list.component.css']
})
export class TwoColumnListComponent {
@Input() ListObjects: ListTwoColumnObject[];
constructor() { }
}
ListTwoColumnObject
export class ListTwoColumnObject {
key: any;
value: any;
constructor(key: any, value: any){
this.key = key;
this.value = value;
}
}
Example of Creating List
const objList = Array<ListTwoColumnObject>();
objList.push(new ListTwoColumnObject('Fakturanr.', invoice.invoiceNr));
objList.push(new ListTwoColumnObject('Betalt', convertBool.transform(invoice.isPaid)));
objList.push(new ListTwoColumnObject('Ordre opprettet',
datePipe.transform(invoice.orderDate,'yyyy.MM.dd')));