Question

I’m using a template to fill a table:

Template:

<tr data-bind="click: pressedItem, style: { top: getHeightFromIndex($index), position: 'absolute' }">
    <td class="resultCell">
        <div class="resultItem" data-bind="attr: { id: $root.key }, html: formattedName" style="float: left"></div>
    </td>
</tr>

In the view model:

getHeightFromIndex = function(index) {
    console.log("Height: " + (index() * 40) + " px");
    return (index() * 40) + ' px';
}

My height prints out correctly in the console, but all the table row overlap each other (as if there is not a top dimension set). Am I binding it incorrectly?

Answer 1

Figured it out.

return (index() * 40) + ' px';

should be…

return (index() * 40) + 'px';

Spacing before ‘px’ messes it up.