Handsontable scroll issue with non default row height

Question

I have a problem: handsontable scroll is jumping when row height is non-standard.

My code is:

$(document).ready(function () {

  function createBigData() {
    var rows = []
      , i
      , j;

    for (i = 0; i < 10; i++) {
      var row = [];
      for (j = 0; j < 7; j++) {
        row.push(Handsontable.helper.spreadsheetColumnLabel(j) + i + "\n2nd_row");
      }
      rows.push(row);
    }

    return rows;
  }

  $('#example1').handsontable({
    data: createBigData(),
  });
});

jsfiddle: http://jsfiddle.net/LR4Ne/

Try to scroll to the bottom of the table. Do you see it jumping back and forth?

I've noticed that old version of handsontable js didn't work that way, try to change

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>

to

<script src="http://old.handsontable.com/dist/jquery.handsontable.full.js"></script>

It works as it should now.

Please advise. Thanks in advance!

-- Dmitry

Answer 1

I'm entirely sure what the issue with the new handsontable version is, but the problem is occuring because of the \n newline your entering into each cell. Handsontable has a method for entering markup into cells, which I've used in this fiddle, however the problem still exits. If you remove the \n and add more rows, it works fine. (Side note: I'm using a <br> here, because I think symantically, that makes more sense, but it doesn't matter which you use.) You will notice in this example, you can scroll, but once you get to the bottom, it starts getting jumpy again. Which led me to:

To fix the issue you can define the minimum height for the .wtHider class used by the plugin. Here is a working fiddle which shows how to fix the issue.

The main problem here is that when you scroll, handsontable is actually re-rendering the table, with the newly viewable rows. Upon re-render, handsontable is dynamically setting the height of the .wtHider and .wtHolder, which is what is causing the issue.

This is a "hacky" solution, but it should probably work for your needs. Hope this helps.

Per request, here's another fiddle with fixes the space issue at the bottom of the table: http://jsfiddle.net/8awo0gzk/1/