One row of divs with ng-repeat

Question

I need to create a list of divs as looking like below sample:

I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.

What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.

Example code:

    <div class="col-md-12" scrollablebar>
        <div ng-repeat="newview in newviewslist" class="col-md-2">
            Here goes the date from newview... 
        </div>
    </div>

This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.

How do I prevent that from happen?

Answer 1

I solved the problem like this:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10 col-xs-11" scrollablehorizontal>
        <table class="borderless">
            <tbody>
                <tr>
                    <td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
                        <p>
                            all the things... 
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>

Answer 2

in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.

try to change "col-md-12" to "row-fluid"

<div class="row-fluid" scrollablebar>
    <div ng-repeat="newview in newviewslist" class="col-md-2">
        Here goes the date from newview... 
    </div>
</div>

and add css:

.row-fluid{
   white-space: nowrap;
}

.row-fluid .col-md-2{
    display: inline-block;
    margin-left:10px;
}

jsfiddle