Gantt layout scroll

Gantt
#1 
gantt.config.layout = {
    css: "gantt_container",
    rows: [
      {
        cols: [
          {
            width: 700,
            min_width: 700,
            rows: [
              {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
              {view: "scrollbar", id: "gridScroll", group: "horizontal"}
            ]
          },
          {resizer: true, width: 1},
          {
            rows: [
              {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
              {view: "scrollbar", id: "scrollHor", group: "horizontal"}
            ]
          },
          {view: "scrollbar", id: "scrollVer"}
        ]
      },
    ]
  };

let resource = {
      _isResourceView: true, // 添加标识
      gravity: 1,
      id: "resources",
      config: resourceConfig,
      cols: [
        {view: "resourceGrid", group: "grids", width: 700, scrollY: "resourceVScroll"},
        {resizer: true, width: 1},
        {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
        {view: "scrollbar", id: "resourceVScroll", group: "vertical"}
      ]
    };
    gantt.config.layout.rows.push(...[{resizer: true, width: 1}])
    gantt.config.layout.rows.push(...[resource]);

I have found that such a configuration layout will cause the scroll bar below to overlap with {resizer: true, width: 1} when the number of grid fields increases, thus making the scroll bar invalid. Is there any way to solve this problem? Could you please make some modifications to my layout? Thank you

#2

Hello,

I tried to reproduce the issue using your layout configuration, but I wasn’t able to reproduce the scrollbar overlapping the resizer, even when increasing the number of grid fields. Here is a snippet where your layout renders correctly on my side: DHTMLX Snippet Tool.

Based on the configuration you shared, your layout defines:

  • own vertical scrollbars for each view,
  • own horizontal scrollbar for the grid ({ view: "scrollbar", id: "gridScroll", group: "horizontal" }),
  • and a shared horizontal scrollbar for both the resource timeline and the main grid timeline.

If you would like to configure the layout differently, please let me know what result you are trying to achieve, and I’ll try to suggest a suitable configuration.

Here is a related article that explains layout configuration and how scrollbars can be assigned to different views: Gantt Layout Gantt Docs.

You may also find these examples useful:

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

#3

image
At first it was normal, but as I right-clicked on the Show Assets button triggered, the page redrawed, causing {ressize: true, width: 1} to overlap with the horizontal scrollbar.As shown below

image
image1380×224 57.8 KB

#4

Also my gantt version is 7.1.12

#5

Hello,

Thank you for the additional details. I was able to reproduce it. This is a known issue with resizers overlapping scrollbars. This bug was fixed starting from DHTMLX Gantt v9.0.6.
https://docs.dhtmlx.com/gantt/whatsnew.html#7012:~:text=Improve%20scrollbar%20behavior%20by%20adjusting%20the%20resizers%20near%20scrollbars

If updating is not an option right now, you can apply the following temporary workaround by adjusting the resizer styles:

.gantt_resizer_y {
  height: 5px !important;
  top: -2px !important;
}
.gantt_resizer_x {
  width: 5px !important;
  transform: translateX(-50%);
}

Here is a snippet with the workaround applied: DHTMLX Snippet Tool.

If possible, I would recommend updating to a more recent version of Gantt. Newer versions include this fix and bring multiple improvements in performance, new features, and more.

You can find the details in the What’s New: