Doubt with ng-repeat

8

I have the following code:

<div id="box-1" class="box">
   <div ng-repeat="task in contato " style="margin-top: 5px">
      <div class="md-card md-card-hover">
          <div class="md-card-content">
              <div style="margin-top:-20px">
                  <span>Cliente: {{ task.razao}}</span><br />
                  <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                  <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
              </div>
          </div>
      </div>
   </div>
 </div>
 <div id="box-2" class="box">
     <div ng-repeat="task in Andamento" style="margin-top: 5px">
         <div class="md-card md-card-warning md-card-hover">
             <div class="md-card-content">
                 <span>Cliente: {{ task.razao}}</span><br />
                 <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                 <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
             </div>
         </div>
     </div>
 </div>
 <div id="box-3" class="box">
     <div ng-repeat="task in fechado" style="margin-top: 5px">
         <div class="md-card md-card-success md-card-hover">
             <div class="md-card-content">
                 <span>Cliente: {{ task.razao}}</span><br />
                 <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                 <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
             </div>
         </div>
     </div>
 </div>
 <div id="box-4" class="box">
     <div ng-repeat="task in perdido" style="margin-top: 5px">
         <div class="md-card md-card-danger md-card-hover">
             <div class="md-card-content">
                 <span>Cliente: {{ task.razao}}</span><br />
                 <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                 <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
             </div>
         </div>
     </div>
 </div>

And in my controller you have the json array:

 $scope.contato = [
   { "id": "1", "razao": "ADEMIR DA", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
   { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
   { "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
   { "id": "4", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

$scope.Andamento = [
    { "id": "1", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

$scope.fechado = [
    { "id": "1", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

$scope.perdido = [
   { "id": "1", "razao": "ADEMIA", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

Here is the result:

How can I make empty spaces (when an array has more items than the others), stay at the bottom?

CSS

#container {
    width: 100%;
    border-color: blue;
    text-align: left;
}

.box {
    display: inline-block;
    width: 24%;
    height: 200px;
    /*margin: 5px 5px;*/
}

.cabecalho {
    display: inline-block;
    width: 24%;
    height: 20px;
    /*margin: 5px 5px;*/
}

#box-1 {
    background-color: white;
}

#box-2 {
    background-color: white;
}

#box-3 {
    background-color: white;
}
    
asked by anonymous 27.08.2017 / 15:26

1 answer

-1

use vertical-align: top; in .box

.box {
    display: inline-block;
    width: 24%;
    height: 200px;
    vertical-align: top;
}
    
10.04.2018 / 18:41