slickgrid resize causes scrollbar gap near bottom

Question

I have the following problem: I use Slickgrid in combination with jquery layout. Panes can be resized with this plugin. When I resize the Slickgrid pane, so that a horizontal scrollbar appears, which wasn't there at first, I am unable to scroll all the way to the bottom.

I have created a jsfiddle to demonstrate: http://jsfiddle.net/uNMRT/2/

Steps to reproduce:

1. make sure the slickgrid pane doesn't have a horizontal scrollbar.
2. scroll all the way doen. (works nicely, you can view record 119, the last one)
3. resize the slickgrid pane using the vertical splitter. Make sure to make the slickgrid area smaller to have a horizontal scrollbar appear.
4. scroll all the way down again. Notice that you are unable to scroll completely down. Record 119 can't be seen now.

I already do a resizeCanvas upon resize:

center__onresize: function(pane, $pane, state, options) {
                myGrid.resizeCanvas();
            }

That's not enough obviously. Any ideas?

Chromatism

Hi, did you ever find a working solution regarding this problem? If so, could you please post it or accept one of the answers if that represents the solution. It would be very helpful. Thanks! – Benzophenone

Answer 1

I ran into the same issue and it seems like that slick grid does not set the "viewportHasHScroll" flag correctly. I found the following two workarounds to fix the issue (SlickGrid v2.1)

1) Update updateCanvasWidth function (line 396) and change the following line

viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width); 

to (notice the "greater than or equal to" sign

viewportHasHScroll = (canvasWidth >= viewportW - scrollbarDimensions.width);

2) Update handleScroll function (line 1920) and update the if block

  //only scroll if they've moved at least one row
  if(vScrollDist && (vScrollDist > options.rowHeight)) {
      ....
  }

Splenetic

Can you report this issue here: github.com/mleibman/SlickGrid/issues thereby other users will get this fix in proper way? Or even better: can you create branch, fix and then create pull request? – Galling

Answer 2

I am facing the same issue but for vertical scroll. If the container is resized the vertical scroll bar does not scroll completely. It stops on the second last record. Although there is space for the bar to scroll it cannot be moved completely to the bottom. If I pull it down the grid jumps and the bar moves to the original position again. The last record can never be viewed.

Catalogue

Yes, that's exactly the behavior I'm having. In Firefox the grid just stops scrolling down, in IE & Chrome the grid jumps up and down when scrolling down near the bottom – Chromatism

Answer 3

I had the issue also when I add a row. It is because you may have not updated the grid correctly. You have to call grid.updateRowCount();

Bejarano