3

I am using handsontable's comment and scroll feature, but it results in wrong positioning of comment when scrolled.

Here is jsfiddle of code

Please scroll and then hover for comment, it shows comment div goes out of its position.

Objects attribute:

    data: getData(),   
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    comments: true,

I want it should come same as it comes without scrolling.

Rohit Nigam
  • 708
  • 8
  • 23
  • Your code looks correct, this may be an issue with the source code. The native scrolling that you're using here is still in "experimental" mode so maybe they haven't gotten around to fixing this positioning yet. – ZekeDroid Feb 25 '15 at 18:20
  • So is there is any alternative which I can try? like changing in CSS or something else. Thanks – Rohit Nigam Feb 26 '15 at 05:13
  • It's possible although might be hard. It looks like the "position" property is being set to relative but this doesn't take into account the scrolling. What I did was make my own tooltip which I recommend you do. – ZekeDroid Feb 26 '15 at 17:07

2 Answers2

2

The problem is a bug in the placeCommentBox. It's getting an wrong offSet position

Based on this post, I modified handsontable.full.js.The placeCommentBox function should look like this:

 placeCommentBox = function (range, commentBox) {
  var TD = instance.view.wt.wtTable.getCell(range.from),
   // wrong offset offset = Handsontable.Dom.offset(TD),
    lastColWidth = instance.getColWidth(range.from.col);
    var rect = TD.getBoundingClientRect();
    var docEl = document.documentElement;
    var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  commentBox.style.position = 'absolute';
  commentBox.style.left = offset.left + lastColWidth + 'px';
  commentBox.style.top = rectTop + 'px';
  commentBox.style.zIndex = 2;
  bindMouseEvent(range, commentBox);
},

You can modify your file or wait for the to fix the bug.

Community
  • 1
  • 1
TFT
  • 134
  • 4
0

Edit handsontable.full.js -> refreshEditorPosition: function()

Before setting position of editor just add window.pageXOffset

// offset bug
x += window.pageXOffset;
this.editor.setPosition(x, y);
Alex
  • 8,461
  • 6
  • 37
  • 49
MarioKaimovic
  • 11
  • 2