CODEWITHSUNDEEP
angularjsstyles
totothegreat
totothegreat

Reputation: 1643

dynamic css style not working on ie?

I have a simple problem of dynamic css setting not working on ie properly:

I have this code:

 <div class="i-storage-bar-chart-bar-container">
                <div class="i-storage-bar-chart-bar"
                     style="height: {{(storage.totalStorage * 100) / model.maxStorageCapacity}}%">
                    <div class="i-storage-bar-chart-bar-inner"
                         style="height: {{(storage.usedStorage * 100) / storage.totalStorage}}%"></div>
                </div>

This kind of code does a simple chart with height of what i told it inside the curly braces, this is working ok in chrome and firefox, but in ie it doesn't do anything, only way to get it working is by doing the following: (non dynamic)

 <div class="i-storage-bar-chart-bar-container">
                <div class="i-storage-bar-chart-bar"
                     style="height: 20%">
                    <div class="i-storage-bar-chart-bar-inner"
                         style="height:10%"></div>
                </div>

What can i do to fix this problem for ie and still maintaining the dynamic stuff happening?

Upvotes: 0

Views: 794

Answers (1)

Ben Diamant
Ben Diamant

Reputation: 6206

You should use ng-style

on your controller:

$scope.style = { 'height': (storage.totalStorage * 100 / model.maxStorageCapacity) + '%' }

and on your div:

<div ng-style="style"></div>

Upvotes: 2

Related Questions