CODEWITHSUNDEEP
javascripthtmlcssangularjs
user4207046
user4207046

Reputation:

Css put a full line at the bottom of every row with angular ng repeat

I have a loop with ng repeat over divs, every div has a width and margin right, they need to be two divs in a row, my problem is that i need a full line at the bottom of every row, not like how it is now with break, how can i do this?

This is the plunker: http://plnkr.co/edit/IGYwgVOhc1eJ24UqROgZ?p=preview

  <div ng-repeat="person in persons" class="personBox">

    <p>{{person.name}}</p>


  </div>

.personBox {

  width: 45%;
  float: left;
  margin-right: 10%;
  border-bottom:1px solid #000;

}

.personBox:nth-child(even) {
  margin-right: 0;
}

app.controller('testCtrl', function($scope) {

  $scope.persons = [{
    name: 'avi'
  }, {
    name: 'tom'
  }, {
    name: 'john'
  }, {
    name: 'ben'
  }, {
    name: 'ben2'
  }, {
    name: 'ben3'
  }, {
    name: 'ben4'
  }, {
    name: 'ben5'
  }]
})

Upvotes: 1

Views: 1331

Answers (3)

Bazinga
Bazinga

Reputation: 11214

This is simple, i am guessing you are using box-sizing of border-box, just change this to:

.personBox {

  box-sizing: content-box;
  width: 40%;
  float: left;
  border-bottom:1px solid grey;

}

.personBox:nth-child(even) {
  padding-left: 10%;  
}

Upvotes: 0

Zeeshan Hassan Memon
Zeeshan Hassan Memon

Reputation: 8325

Run code here, Is that exactly what you want?

var app = angular.module('app', []);

app.controller('testCtrl', function($scope) {

  $scope.persons = [{
    name: 'this is some really long text in some way'
  }, {
    name: 'this could also be a long text in some way'
  }, {
    name: 'john'
  }, {
    name: 'ben'
  },
  {
    name: 'ben2'
  },
  {
    name: 'ben3'
  },
  {
    name: 'ben4'
  },{
    name: 'ben5'
  }]
})
.personBox {
  
  width: 45%;
  float: left;
  
}

.personBox div { 
  padding-left:20px; 
}

.personBox:nth-child(even) {
  margin-right: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link href="style.css" rel="stylesheet" />
  <script data-require="jquery" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="bootstrap" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="testCtrl">


      <div ng-repeat="person in persons" class="personBox">

        <div>{{person.name}}</div>
 <hr/>

      </div>


  

</body>

</html>

Happy Helping!

Upvotes: 1

melwyn pawar
melwyn pawar

Reputation: 1816

I am assuming you want the lines to join from the center if thats the case remove the margin-right and make the width to 50%

.personBox {

  width: 50%;
  float: left;
  margin-right: 0%;
  border-bottom:1px solid #000;

}

Upvotes: 0

Related Questions