Header size bug fix #316

wants to merge 3 commits into


None yet
2 participants

mravey commented Apr 2, 2012

When the size of all the headers is superior to 10'000px there is a bug where column headers are displayed to a second line and there is also a problem when you scroll.
This simple example induce the bug and you don't have it anymore with my fix.

$(document).ready(function () {

  var numberOfCols = 100;
  var numberOfRows = 500;

  var cols = [];

  for (var i = 0; i < numberOfCols; i++) {
      field:'c' + i,
      id:'c' + i,
      name:'c' + i

  var rows = [];

  for (var i = 0; i < numberOfRows; i++) {
    var row = {};

    for (var j = 0; j < numberOfCols; j++) {
      row['c' + j] = (Math.random() * 100).toFixed(2);


  window.grid = new Slick.Grid('#node', rows, cols, {

And what happens when the actual column widths are greater than defaults or when setColumns() is called after initialization?

mravey commented Apr 3, 2012

I didn't think about that. My second commit should take that into account.

You should add extra space for the scrollbar, so that the headers can be scrolled to the rightmost position when vertical scrollbar is present on the grid.


mleibman commented Aug 27, 2012

I must've merged this at some point.

mleibman closed this Aug 27, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment