CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
user944513
user944513

Reputation: 12729

Why can't I set the height of an element with ng-style?

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

Upvotes: 5

Views: 21546

Answers (4)

Tayyab Roy
Tayyab Roy

Reputation: 513

Try this :

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

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

Upvotes: 1

nephiw
nephiw

Reputation: 2046

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>

Upvotes: 0

Ryan Miller
Ryan Miller

Reputation: 1063

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!

Upvotes: 10

Rebornix
Rebornix

Reputation: 5270

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>

Upvotes: 6

Related Questions