I need to open a fullscreen, but I don't want Gantt fullscreen. Let's say half a page is my custom content and the other is gantt itself. I'm using just pure JS requestFullScreen on some outer container and it works alright, but not the tooltips.
- Screenshot 2023-01-24 at 22.16.04.png (10.33 KiB) Viewed 122 times
They're on separate layer that's attached to body, so that when fullscreen is on, they're hidden.
- Screenshot 2023-01-24 at 22.18.24.png (43.59 KiB) Viewed 122 times
I've been tinkering with it for a bit and I came up with a solution that I want to check with you. I've looked at the code for gantt.requestFullScreen, and basically cut out everything that wasn't necessary.
That one useEffect with "me.element.appendChild(me.floatRoot);" is all that's needed and it seems like tooltips work fine, and I don't see any issues caused by it.
const MyComponent = () => {
const ganttRef = useRef();
useEffect(() => {
const me = ganttRef.current?.instance;
if (!me) return;
me.element.appendChild(me.floatRoot);
}, []);
const containerRef = useRef();
const onToggleFullscreen = async () => {
if (containerRef.current) {
if (document.fullscreenElement) {
await document.exitFullscreen();
} else {
await containerRef.current.requestFullscreen();
}
}
};
return (
<div className="myOuterContainer" ref={containerRef}>
<div>Lots of stuff going on here <button onClick={onToggleFullScreen}>Open fullscreen</button></div>
<BryntumGantt
ref={ganttRef}
{...ganttConfig}
/>
</div>
);
};