CODEWITHSUNDEEP
bindinginternet-explorer-8knockout.jsstyles
Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

knockout style binding not working ie8

I am using Knockout.js and I have the following binding to add spacing (margin-left).

<div class="editor-field" data-bind="style : { 'margin-left' : ($root.getHierarchyLevel($index()) * 30 + 'px')}">

This works in IE9 and IE8 compatibility mode. But when I run the same code in IE8 on Windows XP, I do not see any spacing.

I created a jsfiddle example. This add spacing before blah in IE9 but not in IE8.

Any ideas??

Upvotes: 0

Views: 1714

Answers (3)

dotsa
dotsa

Reputation: 941

Had to change, as it was not working in IE8

<div data-bind="style: { display: $data.items.isLoading() ? 'flex' : 'none' }">

to 

<div data-bind="css: { 'searchLoaderFlex' :  $data.items.isLoading(), 'searchLoaderGone':  !$data.items.isLoading() }">

or

<div data-bind="css: $data.items.isLoading() == true ? 'searchLoaderFlex' : 'searchLoaderGone'">

Upvotes: 0

Khan
Khan

Reputation: 433

From: http://knockoutjs.com/documentation/style-binding.html

"If you want to apply a font-weight or text-decoration style, or any other style whose name isn’t a legal JavaScript identifier (e.g., because it contains a hyphen), you must use the JavaScript name for that style."

Try this instead:

<div class="editor-field" data-bind="style : { 'marginLeft' : ($root.getHierarchyLevel($index()) * 30 + 'px')}">

Upvotes: 5

Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

For people having the same issue, I had to use css binding to get this to work. We cann also directly add "class" binding as part of attr.

Upvotes: 2

Related Questions