Angularjs - How to have same height for the child divs when one child div's size is increased dynamically with ng-repeat


Tags: jquery,css,angularjs

Problem :

I have created a parent div. In this parent div, I have added 2 child divs. First child div contains list, which is created using ng-repeat. The first div also has border around it. This first div grows and shrinks based on the list of items. I want the second div to have the same height as the first div so that both the borders are aligned in the parent (i.e., with same height). I know how to do this using jquery. However, I would like to know simpler approaches to this problem either using CSS or Angularjs. Thanks for helping me.

Example of the issue in Plunker : http://plnkr.co/edit/yGI1cJ3y594O89bEZAIH?p=info

<script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

Issue: Same height for both child divs

<div class="row" ng-controller="mainCtrl">
  <div class="col-md-6" style="background-color:lightblue; border-style: solid; border-width:1px;">
    <div class="col-md-12" ng-repeat="item in items" >
      <div>{{item}}</div>
    </div>
  </div>
  <div class="col-md-6" style="background-color:lightred;border-style: solid; border-width:1px;">
    <br />
    Enter new item to see in the list:
    <br />
    <input type="text" ng-model="newItem" /> 
    <input type="button" ng-click="addItem()" value="Add" />
  </div>
</div>


<script>
var app = angular.module("mainApp", []);
app.controller("mainCtrl", function ($scope) {
  $scope.items = [1, 2, 3, 4, 5, 6, ];
  $scope.newItem = "";

  $scope.addItem = function() {
    $scope.items.push($scope.newItem);
    $scope.newItem = "";
  }
});

</script>



Solution :

This question seems to be a duplicate of this question which I answered here.

The solution is to create a Directive that watches the height changes on your div:

app.directive('master',function () { //declaration; identifier master
    function link(scope, element, attrs) { //scope we are in, element we are bound to, attrs of that element
      scope.$watch(function(){ //watch any changes to our element
        scope.style = { //scope variable style, shared with our controller
            height:element[0].offsetHeight+'px', //set the height in style to our elements height
            width:element[0].offsetWidth+'px' //same with width
          };
      });
    }
      return {
        restrict: 'AE', //describes how we can assign an element to our directive in this case like <div master></div
        link: link // the function to link to our element
      };
});

You can read more about it in my answer I linked above.


    CSS Howto..

    How to change the style of the arrow in a select box using css

    How do I vertically align elements within a div in CSS?

    How to make corners of progress bar round in css

    javafx ImageView how to use css hover

    How can I change the text decoration on numbers only on my web page?

    Restricted to CSS-2.1, can I ensure that one border in a table shows 'on top' of another border when borders are collapsed

    How can I make my web application look correct in IE 8 and 9? [closed]

    How can razor be used to expand CSS templates?

    AngularJS: How to unselect a span when selecting another

    CSS how to use pseudo-class :not with :nth-child

    How to put images behind each other in css

    How to create a template that will show only in IE6 using javascript?

    How to make animation smooth

    How can I align my paragraphs in CSS/bootstrap properly?

    How to prevent HTML elements from being pushed down the page

    How to make a div box with display:flex clickable like display:block?

    How to create opacity effect on webOS?

    how to make a drop down menu fixed from the top with css?

    How to create a Line Item with vertical middle aligned text?

    How to css html to display image in IE, which can be viewed in firefox, chrome, and safari?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    How to position the twitter widget

    How does Apple position its slideshow inside a fixed-position box?

    Clip the vertical and horizontal overflow of
     tag outside of its container, and show scrollbars

    How to change button CSS attributes

    How to highlight a table row upon hover conditionally based on table cell values with CSS and jQuery?

    How to do CSS wild card search? [duplicate]

    How to vertically align inline-block elements with height set and test with browser tools

    How to set border around Twitter Bootstrap Icon?

    How do I make an image shrink and grow according to re-sizing the browser.