Reply To: How can I make the Smart Gantt responsive in JavaScript?

[admin]

Hi Alex,

For Smart.Gantt, the cleanest approach is to make responsiveness part of the layout strategy rather than trying to resize the component manually on every window event.

A recommended pattern is:

1. Put Smart.Gantt inside a responsive container
– Use a parent element with flexible sizing (width: 100%, controlled height, flex/grid layout).
– Let the component calculate its available space from the container.

2. Handle resize events through a ResizeObserver
– Prefer observing the Gantt container instead of listening directly to window.resize.
– This also handles side panels, dashboard layout changes, and dynamic navigation areas.

Example:

const container = document.querySelector('#ganttContainer');
const gantt = document.querySelector('smart-gantt');

const resizeObserver = new ResizeObserver(() => {
    gantt.refresh();
});

resizeObserver.observe(container);

Regards,
Markov