css update on resize with angularjs -
i trying make div square, initialised @ width , height of 25% of width of page. want size of div gets updated everytime resize browser right width , height. doing wrong?
'use strict' angular.module("cars4export.directives", []).directive('box', function($window) { return { restrict: "c", link: function(scope, element, attrs) { var width = $window.innerwidth * 0.25; //initialising element.css({ width: width, height: width, "font-size": width * 0.1, paddingtop: width * 0.25, paddingleft: width * 0.3 }); //on resize angular.element($window).bind('resize', function() { element.css({ width: width, height: width, "font-size": width * 0.1, paddingtop: width * 0.25, paddingleft: width * 0.3 }); scope.$apply(); }) } } })
.bleu { background-color: #45619d; color: white; }
<div class="container-fluid" ng-controller="headerconfigcontroller"> <div class="row"> <div class="col-md-3 bleu box"> <h4>hello world</h4> </div> <div class="col-md-3"> </div><!--end logo--> <div class="col-md-3"> </div><!--end menu--> <div class="col-md-3"> </div><!--end newsletter--> </div> </div>
Comments
Post a Comment