Как выровнять мой список внутри моих списков-групп-элементов для печати довольно - PullRequest
Новая
       51

Как выровнять мой список внутри моих списков-групп-элементов для печати довольно

0 голосов
/ 20 декабря 2018

Я печатаю немного list-group-items внутри контейнера для карточек, как показано ниже, он не выровнен должным образом.Я использую Bootstrap 4. Моя цель - выровнять все 3 поля в аккуратном столбце с вкладками.Также открыты для других предложений.

Я использовал символ | в качестве разделителя.Это мой код для того, что я уже сделал. 

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

А сценарий для заполнения вышеупомянутого контейнера карты написан ниже.(Почему он заполняется так? Потому что должен произойти какой-то выбор, который я должен отправить в бэкэнд через AJAX, для которого ответ вызывает функцию успеха, которая вызывает 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>

И в настоящее время это выглядит не очень красиво: container of list-group-items

Можете ли вы помочь / предложить / изменить мой контейнер для выравнивания столбцов?

Вот Plnkr моего кода для игры:

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

PS: Бонус исправился бы, когда я попытался разделить на |, это не такЕсли я не заменил / удалил пробел, я испортил свою временную метку, как вы можете видеть на картинке выше.Я не знаю, как это исправить сейчас.

1 Ответ

0 голосов
/ 31 декабря 2018

То, что вы хотите, даже близко не возможно в одном только CSS, это нужно сделать в HTML.Почему бы не перестроить его как АКТУАЛЬНУЮ таблицу?

Примерно так: 

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

Редактировать: Вот, пожалуйста: 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');
        }
    }
  }
...