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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -