How to align my list inside my list-group-items to print pretty

Question

How to align my list inside my list-group-items to print pretty

312 Views Asked by YouGotA.BigEgo At 20 December 2018 at 20:26

I am printing some list-group-items inside a card container like below it is not aligned properly. I'm using Bootstrap 4. My goal is to align all 3 fields in a neat tabbed column. Also open to other suggestions.

I used a | symbol as a separator. This is my code for what I have already done.

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

And the script to populate the above card container is written below. (Why is it populated like this? Because some selection needs to happen, which I require to send to the backend via AJAX, for which the response calls a success function which calls the populate_rightcontainer()) :

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

And it currently looks like this which is not pretty: container of list-group-items

Can you help/suggest/modify my container align columns pretty?

Here is Plnkr of my code to play with:

http://plnkr.co/edit/EumtRHhzNb4nEFhScWjY?p=preview

P.S: Bonus fix would be when I tried to split by |, it didn't work unless I replaced/removed space, I messed up my timestamp as you can see in above picture. I don't know how to fix that now.

Original Q&A

There are 1 best solutions below

**Eliezer Berlin** · Answer 1 · 2018-12-31T15:04:32.710000

What you want isn't even close to possible in CSS alone, it needs to be done in HTML. Why not rebuild it as an ACTUAL table?

Something like this:

<table>
  <tr class="red">
    <td>
      <a href="#">arr[0]</a>
    </td>
    <td>
      <a href="#">arr[1]</a>
    </td>
    <td>
      <a href="#">arr[2]</a>
    </td>
  </tr>
</table>

Edit: Here you go: http://next.plnkr.co/edit/xDIdHnC5tU5lGYPg?p=preview

HTML:

<table id="rightContainer" style="height:225px; overflow-y: scroll">

JS:

  function populate_rightcontainer(myJSON){
    $("#rightContainer").empty();   
    var data = myJSON.data;
    for(i=0; i<data.length; i++){
        var str = data[i].replace(/\s+/g,'');
        var arr = str.split('|');
        var row = $('<tr></tr>');
        var elementOne = $('<td>' +arr[0] + '</td>');
        var elementTwo = $('<td>' +arr[1] + '</td>');
        var elementThree = $('<td>' +arr[2] + '</td>');
        row.append(elementOne);
        row.append(elementTwo);
        row.append(elementThree);
        $("#rightContainer").append(row);               
        if(arr[2] == "Passed"){
            row.addClass('list-group-item-success');
        }
        if(arr[2] == "Failed"){ 
            row.addClass('list-group-item-danger');
        }
    }
  }

How to align my list inside my list-group-items to print pretty

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in BOOTSTRAP-4

Related Questions in DJANGO-BOOTSTRAP4

Trending Questions

Popular # Hahtags

Popular Questions