5

I am trying to add dynamically set the height of a div, but it is not successfully being set. I get the height of window and divide it by 3, but it is not working. Here is where I set the height:

<div id="wrapper" ng-style="height :hgt+'px'">

I am setting the scope variable like this:

 $scope.hgt = $window.innerHeight / 3;

But the height isn't set.

Plunker http://plnkr.co/edit/eGaPwUdPgknwDnozMJWU?p=preview

4 Answers 4

10

The usage of ng-style is slightly counter-intuitive. You're attempting to use it to interpolate values, but per the Angular documentation ng-style takes an expression "which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys."

Thus, you might want to try:

$scope.hgt = { height: ($window.innerHeight / 3) + 'px' };
<div id="wrapper" ng-style="hgt">

Hope this helps!

6

You should put a dictionary in ng-style like below

<div id="wrapper" ng-style="{height: '{{hgt}}px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>
1
  • checking wait for seconf
    – user944513
    May 31, 2015 at 1:22
0

Per the documentation: https://docs.angularjs.org/api/ng/directive/ngStyle

ng-style takes an object, not a string. Here is the fix:

<div id="wrapper" ng-style="{ height :hgt+'px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>
0

Try this :

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.