Why are there no scrollbars in the mxGraph parent container div?

0
votes

My mxGraph-js application (with Angular) loads dynamic content from a webservice, such as objects and relations and presents them as vertices and edges in a mxHierarchicalLayout. Panning is set to false.

Problem: no scrollbars appear in the parent container, even if the created graph is big and the parent container (a div element) is configured with overflow:scroll.

Expectation: if the graph becomes bigger than the parent container, the parent container should present scrollbars.

See also the attached image.

Observations: mxGraph creates an SVG with incorrect min-width/min-height information, or rather: the min-width/min-height information is not calculated, even when applying the mxHierarchicalLayout. Therefore the resulting SVG is smaller than the actual graph. As a result, the parent container div does not present scrollbars and a part of the graph will not be visible.

I know that in other mxGraph application this always works smoothly, e.g. scrollbars appear always when they are needed. So my question is: what could be the reason for this behavior? What is needed to make sure that the resulting SVG size is calculated correctly?

Thank you and kind regards, Daniel

mxGraph, scrollbars missing

1
scrollbarmxgraph

1 Answers

0
votes

Generally, scrollbars are displayed without any mxGraph extra configuration, but it is also sensible to the graph container (i.e. the graph div) style. overflow:scroll is generally not needed, using position:absolute always makes the scrollbars be displayed.

Here is what the documentation (https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html) says about scrollbars

The overflow CSS property defines if scrollbars are used to display the graph. For values of ‘auto’ or ‘scroll’, the scrollbars will be shown. Note that the resizeContainer flag is normally not used together with scrollbars, as it will resize the container to match the size of the graph after each change.

See https://jgraph.github.io/mxgraph/javascript/examples/scrollbars.html for instance (the scrollbars are displayed when the cells are moved out of the screen) or other examples from https://jgraph.github.io/mxgraph/javascript/index.html