Gantt rows not rendering after container height change

JoseMiguelPulgarin

Hellooo,
Following up on the explanation given in this discussion https://forum.svar.dev/d/187-template-recalculation-in-gantt-columns/3, I understand why you use a lazy rendering strategy where only visible rows are mounted into the DOM, and I thank you for your response, it has been helpfull. But, related to that approach, I have been experiencing another bug.

I’m working with a relatively large list of tasks, and the Gantt container does not always fill the full screen height. On initial render, only the rows that fit within the current container height are visible, this is expected.

However, I have a button that expands all tasks. When I click it, the container height increases (e.g. due to additional content or layout changes), but the Gantt does not render the newly visible rows unless I trigger an explicit re-render (like select a task or scroll into the gantt). It seems the Gantt is not aware that the visible area has changed or something like that.

Is there a way to programmatically trigger the Gantt to re-evaluate which rows should be rendered, or force it to refresh after the container size changes?

Here you can reproduce the problem https://stackblitz.com/edit/vitejs-vite-defwe15u?file=src%2FGanttComponent.jsx

Thanks for any help.

tasha

Hello JoseMiguelPulgarin,

To make the tasks visible you need to set height: 100%; to all the containers of the gantt.
In your example I set these are:
(App.css file)

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#root {
  overflow: hidden;
  height: 100%;
}

(index.css file)

.demo-rows {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Please check the example: https://stackblitz.com/edit/vitejs-vite-udrvqxyx?file=src%2FGanttComponent.jsx,src%2FApp.css,src%2Findex.css

JoseMiguelPulgarin

Hello Tasha,

I have not been able to replicate your solution in my code example. Even though I add the same css, I still have the same problem. Are there any other settings I am missing?
https://stackblitz.com/edit/vitejs-vite-defwe15u?file=src%2Findex.css

tasha

You forgot to add a class className="demo-rows" to the div container in the file GanttComponent.jsx (row 42) :

  return (
    <div className="demo-rows">
      <div>
        <button onClick={handleExpand}>Expand</button>
        <button onClick={handleCollapse}>Collapse</button>
      </div>
      <Willow>
        <Gantt init={init} tasks={tasks} zoom={zoomConfig} />
      </Willow>
    </div>
  );
};