AngularJS ng-repeat overflow

Question

I'm trying to output html anchors inside a fixed width container. When using angular's ng-repeat the links overflow outside of the container. Below is the code snippet for ng-repeat. Refer to the jsfiddle for an example of the overflow.

http://jsfiddle.net/n1Lkybwf/2/

<div style="width: 200px; padding: 5px; border: solid 3px #000;">
    <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}</a>
</div>

Answer 1

The problem is that the width of the container is being calculated before the DOM is rendered (DOM rendering is asynchronous). In Angular, This is the order things are happening...

By default, anchor tag displays as inline-block while a simple div as a block. That's why the solution is to ng-repeat the div not the anchor tag, then to fix the block-displaying by styling the div with display: inline-block.

  <div class="tag" ng-repeat="tag in tags" style="display:inline-block;">
    <a  style="margin-right: 5px;">{{tag}}</a>
  </div>

Here is a working fiddle : http://jsfiddle.net/9zhc3bqu/

Answer 2

You can add a div and put the ng-repeat on the div, as shown below

<div ng-controller="MyCtrl">
    <div style="width: 200px; padding: 5px; border: solid 3px #000;">
        <div ng-repeat="tag in tags">
        <a  style="margin-right: 5px;">{{tag}}</a>
        </div>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>

Answer 3

May be you can use the scroll bar to hide the overflow part

<div ng-controller="MyCtrl">
    <div style="overflow-y : scroll;width: 200px; padding: 5px; border: solid 3px #000;">
        <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}</a>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>

Or a <br/> tag might do.

<div ng-controller="MyCtrl">
    <div style="overflow-y : scroll;width: 200px; padding: 5px; border: solid 3px #000;">
        <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}<br/></a>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>

Answer 4

you have fix width (200px) that's why the container dosen't expand with the elements inside.

you should remove the width, and change the display if you want the container to expand with the elements.

http://jsfiddle.net/cmbnyack/1/

or as Bhaskor Jyoti Sarmah suggested overflow:scroll;

Answer 5

Try this

<div ng-controller="MyCtrl">
    <div style="width: 200px; padding: 5px; border: solid 3px #000;">
        <a ng-repeat="tag in tags" style="margin-right: 5px;">
            <span ng-if="(tags_inx%2) != 0">
            {{tag}}
</span>
            <span ng-if="(tags_inx%2) == 0">
            {{tag}}<br/>
</span>
</a>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>