I've encountered an issue where the alignment of list-group-items inside a card container is not correct. I am using Bootstrap 4 and my aim is to neatly align all 3 fields in a tabbed column layout. Any suggestions on how to achieve this are welcome.
To separate the fields, I have used a | symbol. Below is the code snippet of what I have implemented so far:
<!--HTML-->
<body>
<div class="containers">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header py-2">Testcases</div>
<div id="rightContainer" class="list-group" style="height:425px; overflow-y: scroll">
<!--Populated by JS function -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Additionally, here is the script that populates the above card container. The script utilizes a success function to fetch data from the backend via AJAX and update the container dynamically:
<!--SCRIPT-->
<script>
function populate_rightcontainer(response) {
$("#rightContainer > a").removeClass("active");
$("#rightContainer > a").hide();
$("#rightContainer").empty();
for (i = 0; i < response.length; i++) {
var str = response[i].replace(/\s+/g, "");
var arr = str.split("|");
var testcase = arr[0] + " | " + arr[1] + " | " + arr[2];
if (arr[2] == "Passed") {
$("#rightContainer").append('<a class="list-group-item list-group-item-success py-0">' + testcase + "</a>");
}
if (arr[2] == "Failed") {
$("#rightContainer").append('<a class="list-group-item list-group-item-danger py-0">' + testcase + "</a>');
}
}
}
</script>
The current display does not look very appealing and I would appreciate any guidance or modifications to improve the alignment of columns within the container.
You can access a Plnkr demo of my code here:
http://plnkr.co/edit/EumtRHhzNb4nEFhScWjY?p=preview
P.S: On attempting to split by |, I faced issues with spaces which affected my timestamp organization as shown in the image above. Any assistance in resolving this matter would be greatly appreciated.