Overlapping UI components without windows/popups

Webix JS
1

I’ve created a custom component that I intend to use several times in my website. Each instance has to handle it’s own set of values.

In this component, I draw a graph using D3. The canvas for the graph should be 100% of the component’s width. I also want to show (toggleable) a sidepanel that contains filtering options for said graph. I want this sidepanel to show over the graph, not side-by-side (showing side-by-side triggers a resize of the graph, which makes the graph seem inconsistent, from the users point of view, opening a side panel shouldn’t trigger a resize).

Anyway to do this without windows or popups?

2

I don’t see how it can be done with current UI

It requires a custom layout component. Creating such layout is a non-trivial task. If you have a support subscription, please contact us by email.

3

Found a way (probably unintentional) to do this, for future reference.

If I put the canvas and the sidepanel in the same {cols:[]}, sidepanel starts hidden. If I call sidepanel.show() and don’t call the resizing function on the canvas, the sidepanel just shows over the canvas while the canvas fills the whole component, which is what I wanted.