Search This Blog

Saturday 19 March 2016

maintain two divs same width and height angular/ionic

Problem Statement:
I have two divs and i need to maintain them at some height always. one expands its size decreases based in dynamic content that will be loaded and  the other has to increase/decrease its height accordingly.

my elements are the below:
1. <div round-progress master
max="100"
current="100"
color="green"
bgcolor="#eaeaea"
rounded="true"
clockwise="true"
responsive="true">

</div>

2. 
<div class="item AirDivs AirMeterFill" ng-style="Airstyle">
      <div style="height:30%; background-color: rgba(195, 7, 15, 0.09);border-top: 3px solid     #DC0D29;font-size:smaller;text-align: center;">
<div>poor: 8</div>
<div></div>
</div>

</div>
according to size of 1st element i want to set height of 2nd element using angularJS/Ionic.

Solution:
It can be achieved through angular directives easily. Use below directive to set it

.directive('master',function () { //declaration
  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
 console.log("ht:"+element[0].offsetHeight);
     scope.Airstyle = { //scope variable style, shared with our controller
     height:element[0].offsetHeight-35+'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
 };
});


  • i am having a directive called master which can be a element/attribute - defined by restrict
  • i am linking it using my link function, where i will be watching for any change of my master (1st element) 
  • when the height of master changes i am setting ng-style of  my other div.
  • i can get of height of 1st element using offsetHeight html property. 

Refrence: http://www.ngroutes.com/questions/1b1848d/set-height-of-one-div-to-another-div-in-angularjs.html

No comments:

Post a Comment