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
};
});
Refrence: http://www.ngroutes.com/questions/1b1848d/set-height-of-one-div-to-another-div-in-angularjs.html
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