Stuck on an issue?

Editing the columns array definition in example11-autoheight.html to the below, the grid can be scrolled horizontally using a trackpad/mouse, no horizontal scrollbar is displayed.

columns = [
  { id: "title", name: "Title", field: "title", width: 200 },
  { id: "duration", name: "Duration", field: "duration", width: 200 },
  { id: "%", name: "% Complete", field: "percentComplete", width: 200 },
  { id: "start", name: "Start", field: "start", width: 200 },
  { id: "finish", name: "Finish", field: "finish", width: 200 },
  { id: "effort-driven", name: "Effort Driven", field: "effortDriven", width: 200 }
]

Is this expected behaviour? If not, could anyone give me a pointer to where I might be able to resolve it?

From my investigation, the scrollbar appears to be there on the viewport, but because the viewport’s container, .slick-pane-top.slick-pane-left, height is set to the height of the viewport, it’s below the bottom of the top left pane. I’ve experimented with adding the height of the scrollbar to the top pane, but at this stage, viewportHasHScroll hasn’t yet been calculated, and even when doing so, the canvas appears to have a little extra padding below the final row, so simply adding the height of the scrollbar is insufficient.