Using flexbox for equal height bootstrap columns not working with angularjs

Question

I'm trying to get panels in a row to have equal heights regardless of content. I got this working fine using a basic bootstrap example, as in this example.

However, when I use angularjs to create the contents with data from the controller, using ng-repeat and ng-controller, this totally f***s it up, and the result looks horrible, with completely different results in firefox and google chrome.

The div using ng-controller and ng-repeat for some reason adds width to the content, so that instead of having 3 panels next to each other they are placed below each other (in firefox it's the opposite effect, and the div becomes 40px wide when it should be 400). When inspecting the result in chrome, the div has another directive "ng-scope", which I think is what is adding the width. The columns also does not appear to have equal height, like they should. When I remove the directives from the div and manually insert content, it works fine.

Does anyone know how to make flexbox work with angular, or maybe another way to get the columns to have equal height regardless of content?

View:

<div class="row row-flex row-flex-wrap" id="aktivitetsmodul">
            <div class="col-md-12">
                <h2 class="page-header">
                 Aktiviteter
                </h2>

            </div>

            <div ng-controller ="AktivitetController" ng-repeat="aktivitet in aktiviteter | orderBy: '-navn'">
                <div class="col-md-4"  >

                <div class="panel panel-default flex-col ">
                    <div class="panel-heading"> <h4> <a href="#" >{{aktivitet.navn}} </a> </h4> </div>
                    <div class="panel-body  flex-grow ">
                        <span class="pull-left"> <img src="assets/img/logo.jpg" style="padding:0.3em" width="70px"/></span>
                        <p> {{aktivitet.beskrivelse}}</p>
                    </div>

                    <div class="panel-footer">
                        <span> {{aktivitet.fra}} <i> til </i> {{aktivitet.til}} </span>
                        <span class="pull-right glyphicon glyphicon-trash" style="margin-left:10px"> </span>
                        <span class="pull-right glyphicon glyphicon-edit"> </span>             
                    </div>
                </div>
            </div>
        </div>
</div>

Controller

(function(){
 angular.module("Aktivitet",["ui.bootstrap",])
 .controller('AktivitetController', function($scope){
              $scope.aktiviteter = [
                  {"navn":"Pitchfork Etsy", "beskrivelse":"Squid Shoreditch direct trade, single-origin coffee banh mi cardigan kitsch cliche vegan seitan cornhole ethical mumblecore","fra":"09-12-2015","til":"20-03-2016"}, 
                  {"navn":"Occupy DIY","beskrivelse": "Farm-to-table organic flannel Brooklyn locavore. Gastropub normcore bitters, brunch YOLO sriracha tote bag fashion axe ennui iPhone bespoke. ","fra":"10-10-2015","til":"24-12-2015"},
                  {"navn":"McSweeney's Intelligentsia", "beskrivelse":"Aesthetic narwhal beard, Portland McSweeney's ethical Brooklyn Tumblr Marfa drinking vinegar sartorial Williamsburg. ","fra":"10-10-2015","til":"24-12-2015"},
                  {"navn":"Keffiyeh normcore", "beskrivelse":"irony quinoa vegan. Health goth retro ennui, kogi forage Odd Future ugh selfies.","til":"05-07-2012","fra":"12-04-2015"}, 
                  {"navn":"Master cleanse vegan iPhone","beskrivelse": " DIY umami occupy literally pork belly Austin biodiesel cred. Kale chips wolf fingerstache, you probably haven't heard of them messenger bag distillery whatever..","til":"01-01-2016","fra":"24-12-2015"},
                  {"navn":"Blue Bottle Kickstarter organic", "beskrivelse":"disrupt lo-fi plaid craft beer banh mi. Keffiyeh pickled church-key bicycle rights selvage. Vinyl brunch Banksy, Williamsburg fap iPhone ethical gluten-free meh raw denim VHS American Apparel semiotics. ","til":"05-07-2012","fra":"12-04-2015"}

              ]
      })

})();

Please show us what you've done so far such as your JS, HTML and CSS. — brimble2010
The post is updated with code from view and controller. The css is exactly the same as in the link provided in the post. — Julie Røsok

ischenkodv ischenkodv · Accepted Answer · 2015-09-07T13:39:38

Angular wraps col-md-4 columns in one more div which stacks them one above the other. To remove it you should add this class to ng-repeat div:

<div class="col-md-4" ng-controller="AktivitetController" ng-repeat="aktivitet in aktiviteter | orderBy: '-navn'">
    <!-- REMOVE THIS AND ADD THIS CLASS TO PARENT -->
    <!-- div class="col-md-4" -->

            <div class="panel panel-default flex-col ">
                <div class="panel-heading"> <h4> <a href="#" >{{aktivitet.navn}} </a> </h4> </div>
                <div class="panel-body  flex-grow ">
                    <span class="pull-left"> <img src="assets/img/logo.jpg" style="padding:0.3em" width="70px"/></span>
                    <p> {{aktivitet.beskrivelse}}</p>
                </div>

                <div class="panel-footer">
                    <span> {{aktivitet.fra}} <i> til </i> {{aktivitet.til}} </span>
                    <span class="pull-right glyphicon glyphicon-trash" style="margin-left:10px"> </span>
                    <span class="pull-right glyphicon glyphicon-edit"> </span>             
                </div>
            </div>
    <!-- REMOVE THIS -->
    <!--</div>-->
</div>

Using flexbox for equal height bootstrap columns not working with angularjs

1 Answers