Creating bootstrap columns in angular ng-repeat making issue in width and alignment

Question

I have a directive which will create bootstrap columns dynamically . The problem is directive columns width is not equal to the statically creating bootstrap columns. E.g

<my-directive></my-directive>
<div class="row">
  <div  style="background:green" class="col-md-4 col-sm-4">
  </div>
   <div  style="background:green" class="col-md-4 col-sm-4">
  </div>
   <div  style="background:green" class="col-md-4 col-sm-4">
  </div>
</div>

mydirectiveview.html

div class="row">
  <div  style="background:red" ng-repeat="tile in Tiles" ng-init="colsspan=12/configInfo.Tiles.length" class="col-sm-{{colsspan}} col-xs-12 col-md-{{colsspan}}>
  </div>
</div>

My problem is width of the directives div is not equal when compare to the div created in static so that the div as not aligned properly

enter image description here

Can anyone help me in this ?? I want both the directive div and div created in html file should be in same size and aligned properly.

sylwester · Accepted Answer · 2015-06-13 11:11:28Z

1

Hi I can't see your directive code, nut mayby

there is something wrong

> ng-repeat="tile in Tiles"
> 
> ng-init="colsspan=12/configInfo.Tiles.length"

once you've got Titles and after that is configIngo.Titles

please see here for working solution

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

answered Jun 13, 2015 at 11:11

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Umair Khalid · Accepted Answer · 2015-06-13 11:01:57Z

0

Row class does not behave like table. It will adjust its height and width automatically. i will recommend you to use Table for a smooth layout.

<table class="table table-bordered ">
                <thead>
                    <tr>
                        <th>h1</th>
                        <th>h2</th>
                        <th>h3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="grid in gridData">
                        <td>{{grid.h1}}</td>
                        <td>{{grid.h2}}</td>
                        <td>{{grid.h3}}</td>
                    </tr>
                </tbody>
            </table>

answered Jun 13, 2015 at 11:01

Umair Khalid

2,3491 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Creating bootstrap columns in angular ng-repeat making issue in width and alignment

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related