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>

I've added this to the fiddle. It does not seem to fix the issue. — Logan Garland
– Logan Garland, Commented Nov 12, 2014 at 6:26
Yeah I forgot to save the fiddle when I put it in there. I also added it to the wrong element. Your answer is the cleanest. Thanks! — Logan Garland
– Logan Garland, Commented Nov 12, 2014 at 6:39

DebbieMiller · Accepted Answer · 2014-11-12 06:30:18Z

4

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/

answered Nov 12, 2014 at 6:30

DebbieMiller

4521 gold badge3 silver badges12 bronze badges

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

1 Comment

Logan Garland Over a year ago

It does appear that using display: inline-block can just be applied to the anchor tag without having to wrap it in a div however.

Ghyath Serhal · Accepted Answer · 2014-11-12 06:19:03Z

1

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>

answered Nov 12, 2014 at 6:19

Ghyath Serhal

7,6326 gold badges47 silver badges63 bronze badges

2 Comments

Logan Garland Over a year ago

This would put each anchor on its own line. I would like the links to be inline and wrap automatically, just like the second div.

Logan Garland Over a year ago

That does seem to produce the intended result. Interesting that the html that angular injects doesn't adhere to the containing object. Is this a common occurrence with html that is injected to the DOM? The html that angular outputs is essentially the same as the html that I hardcoded in the fiddle.

Bhaskor Jyoti Sarmah · Accepted Answer · 2014-11-12 06:17:02Z

0

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>

answered Nov 12, 2014 at 6:17

Bhaskor Jyoti Sarmah

1262 silver badges12 bronze badges

1 Comment

Logan Garland Over a year ago

I do not wish to have a scrollbar as a fix. The second div in the fiddle is how the result should look. The links should wrap automatically.

Amit Choukroun · Accepted Answer · 2014-11-12 06:18:32Z

0

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;

answered Nov 12, 2014 at 6:18

Amit Choukroun

5435 silver badges14 bronze badges

1 Comment

Logan Garland Over a year ago

I want the links to wrap inside the container. I don't want the container to change. If you view the fiddle you can see the desired result below the overflow.

Bhaskor Jyoti Sarmah · Accepted Answer · 2014-11-12 06:42:35Z

0

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>

answered Nov 12, 2014 at 6:42

Bhaskor Jyoti Sarmah

1262 silver badges12 bronze badges

1 Comment

Bhaskor Jyoti Sarmah Over a year ago

Just put a space after the tag if (tags_inx%2) != 0

Collectives™ on Stack Overflow

AngularJS ng-repeat overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related