4

enter image description hereenter image description hereI have a grid created using class col-md-3 which have 3 columns:

<div ng-repeat='(key, value) in permissionsViewContent' class="row">
    <div class="tree_content_permissions_title">
        <span> {{key}}</span>
    </div>
    <div ng-repeat="val in value"
        class="col-md-3 tree_content_permissions">
        <label class="checkbox"> <input type="checkbox"> 
            {{val}}
        </label>
    </div>
</div>

this grid created from a list of values. I want my grid to have border line after each row in my grid. How can I do it using css?

Thanks,

orikoko
  • 881
  • 5
  • 15
  • 26

2 Answers2

3

Simply you can use <hr/> tags where you want

You can use like this:

DEMO

 <div class="row">
            <div class="tree_content_permissions_title">
                <span>asd</span>
            </div>
            <div class="row">
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" value="sadfdsf" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" value="sadfdsf" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
            </div>
            <hr />
        </div>
Suganth G
  • 5,136
  • 3
  • 25
  • 44
0

What about adding this then DEMO

<div ng-repeat='(key, value) in permissionsViewContent'>
    <div  class="row">
        <div class="tree_content_permissions_title">
            <span> {{key}}</span>
        </div>
        <div ng-repeat="val in value"
            class="col-md-3 tree_content_permissions">
            <label class="checkbox"> <input type="checkbox"> 
                {{val}}
            </label>


        </div>
    </div>
<hr>
</div>
Dev
  • 6,628
  • 2
  • 25
  • 34
  • I tried, but this is not what I want, I want to add the border not after the "row" class, but after each 3 columns are created Inside the row – orikoko Aug 26 '14 at 07:14
  • This is more close to what I am trying to do, but the problem is that it creates small lines under each cell and not one long under all the row – orikoko Aug 26 '14 at 07:26
  • use
    before closing of
    div then it will be after each row
     – Dev Aug 26 '14 at 07:46
  • This is not working. as I said, I need the lines after each 3 columns and not after each row. the rows are all content under my title, like in the image I attached. thanks – orikoko Aug 26 '14 at 07:50
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59986/discussion-between-orikoko-and-dev). – orikoko Aug 26 '14 at 08:16