1

I'm currently building an application with AngularJS, and I've encountered a piece of weird behaviour that I've never seen before. It might be a very easy fix but I don't know the exact terminology to find the appropriate answer, so I apologize in advance for a possible duplicate.

My HTML code looks something similar to this:

<div class="parent">
    <div ng-repeat="item in itemList" style="left: {{100 / itemList.length}}px">{{item}}</div>
</div>

The itemList would just contain som arbitrary data. The problem is that the code between the brackets not executing at all in IE11. In all other browers the result is 25% in cases where itemList holds 4 values, but in IE11 it just registers as literally '{{100/itemList.length}}px' which is obviously not valid CSS.

I've tried converting the whole thing to ngStyle, but that did nothing. Does anyone know why this occurs so specifically in IE11 and how to fix it?

Again, I'm not 100% certain I'm using the correct terminology here so any help in that area would also gretaly appreciated.

UPDATE

I've tried to (again) use ngStyle as suggested in the possible duplicate linked in the comments. It still doesn't do anything, but also does not give me any parse-errors.

ng-style="{left: 'calc(' + (100 / itemList.length) + '% - 10px);'}"

A possible reason could be that on the initial page load, itemList has not been populated. Still, I would assume this updates on a digest-cycle as usual. Inspecting the related element also does not show any value having been set to 'left'.

FvB
  • 713
  • 6
  • 15
  • 1
    Possible duplicate of [Manipulating inline style with angular does not work in IE](https://stackoverflow.com/questions/25655434/manipulating-inline-style-with-angular-does-not-work-in-ie) – Nikolaj Dam Larsen Jul 24 '17 at 07:34
  • 1
    *"`...10px);'`"* <- lose the semi-colon – Phil Jul 24 '17 at 08:18
  • That's the one. Any reason why the semi-colon especially blocks this? I would assume it would be added into the CSS where it's presence doesn't normally bother anything. – FvB Jul 24 '17 at 08:22

1 Answers1

0

Thanks to Phil!

An importance difference between applying styles via ngStyle as to the regular style attribute: do not include semi-colons as part of your style string.

style="left: 50%;"

The above is completely valid CSS.

ng-style="{left: '50%;'}"

The above will not work unless you remove the semi-colon.

FvB
  • 713
  • 6
  • 15