Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout Style binding Top and Left not working

I can't for the life in me understand why this isn't working. This should be a softball for someone. Thanks!

http://jsfiddle.net/ZsA4f/2/

HTML

<div data-bind="foreach:Zones">
    <div class="container" data-bind="style:{ top: ZoneY, left: ZoneX }, text: ZoneTest"></div>
</div>​

CSS

.container { position: absolute; font-size: .75em; }

Javascript

var viewModel = {
    Zones: ko.observableArray([
        {
            ZoneX: 100,
            ZoneY: 100,
            ZoneTest: "hello world"
        },
        {
            ZoneX: 200,
            ZoneY: 200,
            ZoneTest: "rage!"
        }
])        
};

ko.applyBindings();
like image 468
Jason More Avatar asked Aug 17 '12 21:08

Jason More


1 Answers

You need to specify a unit. 100 and 200 should be 100px and 200px respectively

http://jsfiddle.net/ZsA4f/6/

like image 92
daedalus28 Avatar answered Oct 04 '22 20:10

daedalus28