No horizontal scrollbar in React Gantt calendar

SonaBIMSandroDASILVA

Hello,
I’m embedding React Gantt into my React app, and even though I’ve applied:


.gantt-container {
  overflow-x: auto;
  width: 100%;
}


  return (
    <Willow>
      <Gantt
        init={init}
        tasks={tasks}
        links={links}
        scales={scales}
        zoom={zooming}
        columns={columns}
      />
    </Willow>
  );
};

<div
        style={{
          position: "relative",
          width: "100%",
          height: "100%", // occupe tout l'espace vertical restant
        }}
      >
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: "auto",
          }}
        >
          <MyComponent
            setShowOffcanvas={setShowOffcanvas}
            setNewPhase={setNewPhase}
            setIsEditing={setIsEditing}
            projectId={PROJECT_ID}
            setGanttApi={setGanttApi}
            setPhasesFromGantt={setPhasesFromGantt}
          />
          <link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />
        </div>
      </div>

there is no horizontal scrollbar on the calendar. The content does overflow its container, but it remains fixed with no way to scroll sideways.

What I’ve already tried:

Applying overflow-x: hidden on <body> and overflow-x: auto on the Gantt container.

Wrapping the Gantt component in a <div style={{ overflowX: 'auto', width: '100%' }}>.

Changing header width from 100vw to 100% to avoid global overflow.

Forcing max-width or white-space: nowrap on Gantt rows.

Ensuring no parent or wrapper is setting overflow: hidden.

tasha

Hello SonaBIMSandroDASILVA

Could you clarify what is MyComponent and how it looks like?
Where do yo use .gantt-container class?
Which calendar do you mean here?

there is no horizontal scrollbar on the calendar

SonaBIMSandroDASILVA

Hi Tasha,

Thanks for your reply!

To clarify:

MyComponent is a wrapper around the GanttForm component, which uses wx-react-gantt.

The .gantt-container class is defined in my App.css and applied to the container wrapping the <Gantt /> component (see snippet below).

By “calendar”, I’m referring to the Gantt chart timeline area — the horizontal bar showing tasks over time (not a typical date picker or FullCalendar).

Despite applying overflow-x: auto, the horizontal scrollbar does not appear, even when the content clearly overflows its container.

This causes a usability issue:
👉 I cannot reach tasks that are positioned far on the right side of the timeline, since there is no way to scroll horizontally.

I’ve attached a screenshot below showing the overflowing Gantt area — notice that the content goes beyond the visible region, but no scrollbar is shown:

Here’s a simplified code snippet of how it’s embedded:

<div style={{ position: "relative", width: "100%", height: "100%" }}>
  <div style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, overflow: "auto" }}>
    <div className="gantt-container">
      <Gantt
        init={init}
        tasks={tasks}
        links={links}
        scales={scales}
        zoom={zoom}
        columns={columns}
      />
    </div>
  </div>
</div>

Let me know if I'm missing something, or if there’s a recommended way to enable horizontal scrolling properly.

Best regards,
SonaBIMSandroDASILVA

tasha

Hello SonaBIMSandroDASILVA

I tried to reproduce the issue you are facing but I wasn't able so for me this problem is also not obvious.
I've made the example with the styles you provide: https://stackblitz.com/edit/vitejs-vite-fcygk6f5?file=src%2FGanttComponent.jsx,src%2Findex.css

But I guess that there are some other styles that can influence the horizontal scroll in the gantt component.
So here are some suggestions that might help you resolve the problem:

1.Ensure that no other parent elements of the Gantt component has overflow: hidden. This can prevent the scrollbar from appearing.

2.Make sure your Gantt container has the following style appliedwhite-space: nowrap; (Prevents wrapping of content)

3.Use browser developer tools to inspect the layout and see if any CSS rules are affecting the Gantt component's ability to scroll. Look for any unexpected margins or paddings that may be causing overflow issues.
Ensure that there are no global styles (like body or html) that might be affecting the Gantt's layout. Specifically, check for any overflow properties that could interfere.

4.Create a minimal example with just the Gantt component and its container to isolate the issue. This can help determine if other parts of your application are causing the problem.

SonaBIMSandroDASILVA

Hi Tasha,

Thanks again for your help!

Just wanted to follow up and let you know that I found a solution to the horizontal scroll issue — and your StackBlitz example definitely helped point me in the right direction.

I kept this part of my layout unchanged:

<div
  style={{
    position: "relative",
    width: "100%",
    height: "100%",
  }}
>
  <div
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      overflow: "auto",
    }}
  >
    <MyComponent
      setShowOffcanvas={setShowOffcanvas}
      setNewPhase={setNewPhase}
      setIsEditing={setIsEditing}
      projectId={PROJECT_ID}
      setGanttApi={setGanttApi}
      setPhasesFromGantt={setPhasesFromGantt}
    />
    <link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />
  </div>
</div>

But in my GanttForm component (which is rendered inside MyComponent), I changed this:

return (
  <Willow>
    <Gantt
      init={init}
      tasks={tasks}
      links={links}
      scales={scales}
      zoom={zooming}
      columns={columns}
    />
  </Willow>
);

into this:

return (
  <div className="gantt-container">
    <Willow>
      <Gantt
        init={init}
        tasks={tasks}
        links={links}
        scales={scales}
        zoom={zooming}
        columns={columns}
      />
    </Willow>
  </div>
);

This small change made the horizontal scrollbar appear correctly — I can now scroll and reach tasks that were previously out of view.

Thanks again for your help — your StackBlitz demo gave me the clue I needed!

Best regards,
Sandro DASILVA