CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
James Ryan
James Ryan

Reputation: 31

Same Height DIV's using NG-Repeat

I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat. Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.

Ideally once the content has loaded i would the div on the right to be the same height as the div on the left. Would really appreciate any help with the problem.

Cheers

EDIT - Code Included

    <div class="row">
        <div class="noSpacing col-xs-6">
            <div class="col-xs-12 noSpacing rottnestGreen">
                <div ng-repeat="bh in bikeHire" class="row">
                    <p class="col-xs-6">{{bh.type}}</p>
                    <select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
                    <p class="col-xs-3 blueText">{{bh.price | currency}}</p>
                </div>
            </div>
        </div>
        <div class="noSpacing col-xs-6">
            <div class="col-xs-12 noSpacing np rottnestGreen">
                <div ng-repeat="sf in sAndF" class="row">
                    <p class="col-xs-6">{{sf.type}}</p>
                    <select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
                    <p class="blueText col-xs-3">{{sf.price | currency}}</p>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

Upvotes: 3

Views: 1758

Answers (1)

Squazz
Squazz

Reputation: 4171

Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/

Wrapping everything in a container:

<div class="row container">

And then styling the container to use flexing is the way I usually do this

.container {
    display: flex;
    flex-wrap: wrap;
}

The biggest downside though is IE support, I dont hope you are supporting below IE10?

Upvotes: 1

Related Questions