ng-repeat broke bootstrap styles in .form-inline

Question

I'm trying to add buttons to my inline form using ng-repeat directive. It is working but buttons lose spacing between them when using ng-repeat. If I remove ng-repeat and just add exactly identical html for buttons myself then spacing between buttons is ok.

Here is jsfiddle.

If is very strange as resulting html is absolutely identical.

score 3 · Accepted Answer · edited May 23 '17 at 12:22

Let's take a look at the rendered HTML...

First the non-angular:

<div class="form-inline">

    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>
    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>
    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>

</div>

And now the Angular:

<div class="form-inline ng-scope" ng-controller="MyCtrl">

    <!-- ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">123</span>
        </button>
    </div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">456</span>
        </button>
    </div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">789</span>
        </button>
    </div><!-- end ngRepeat: button in buttons -->

</div>

See the difference? There are line breaks and code alignment spaces between the button-wrapper divs in the hand-typed HTML, but none in the HTML rendered by the ng-repeat. Those line breaks and spaces are visually rendered as a single space between each div. This can be demonstrated by removing the line breaks between the divs on the hand-typed HTML. I believe the intention of bootstrap is to render without space between buttons unless explicitly defined.

This other question addresses how to eliminate the spaces

score 1 · Answer 2 · answered Mar 31 '16 at 15:22

I see the example in fiddle but if you remove the div line get the same alination.

however I was having many problems with the Bootstrap styles in ng-repeat in my case the solution was put the style="display: inline-block;" in the div with the ng-repeat directive

<div class="button-wrapper" ng-repeat="button in buttons" style="display: inline-block;">
    <button type="button" class="btn btn-default">
        <span>{{button}}</span>
    </button>
</div>

score 0 · Answer 3 · answered Mar 12 '15 at 02:58

Thanks to @Lathejockey81 answer I finally realized a valid solution. After each button except last we need to insert an empty div with display: inline-block. This div must be last tag inside the ng-repeated tag.

<div class="form-inline" ng-controller="MyCtrl">

    <div class="button-wrapper" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span>{{button}}</span>
        </button>
        <div ng-show="!$last" style="display: inline-block;"></div>
    </div>

</div>

Updated working fiddle.

ng-repeat broke bootstrap styles in .form-inline

3 Answers3