Strange rendering SVG elements in SplitPanel components

Question

I have problem with rendering svg elements in Horizontal/Vertical SplitPanel components.

My vaadin project includes javascript component, which is used for rendering network graph. The javascript component uses d3.js library and network graph is rendered as svg element in parent div element.

In source code below is the main layout of window. I used VerticalLayout component, then I used Label component as a div element in which svg element is created and rendered. Process of creating svg element (network graph) is written in javascript, where svg element is rendered in div element with css class ".v-splitpanel-first-container".

@SuppressWarnings("serial")
public class MyVaadinUI extends UI
{

    final Graph graph = new Graph();

    @Override
    protected void init(VaadinRequest request) {

        final VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        setContent(layout);

        Label div = new Label();
        div.setStyleName("v-splitpanel-first-container");
        div.setHeight(100, Sizeable.UNITS_PERCENTAGE);
        div.setWidth(100, Sizeable.UNITS_PERCENTAGE);

        layout.addComponent(div);
        layout.addComponent(graph);
        layout.setExpandRatio(div, 1);

    }

}

Adding svg element (graph variable in source code) to VerticalLayout component I got expected result:

Then I tried to add svg element to VerticalSplitPanel component instead of VerticalLayout component:

@SuppressWarnings("serial")
public class MyVaadinUI extends UI
{

    final Graph graph = new Graph();
    public static final String brownFox = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. ";


    @Override
    protected void init(VaadinRequest request) {

        final VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        setContent(layout);

        // first main horizontal split panel
        final VerticalSplitPanel vertical1 = new VerticalSplitPanel();
        vertical1.setHeight("100%");
        vertical1.setSplitPosition(80, Sizeable.UNITS_PERCENTAGE);
        layout.addComponent(vertical1);

        vertical1.addComponent(graph);
        vertical1.addComponent(new Label(brownFox)); 
        layout.setExpandRatio(vertical1, 1);

    }

}

And the result is:

The problem is rendered graph, because nodes of graph are “stuck” in the top edge of main window.

Do you have any suggestion how to solve this problem?

Here is my source code and pom

Answer 1

your JS code might get confused by the scaling vaadin does at runtime in the client. if your javascript library has a hook to handle a resize, then you can call this by a listener Vaadin provides. It looks like this:

window.cz_ario_socialgraphuisvg_Graph = function() {
    // ...
    this.updateSize = function(e) {
    e.element.somethingToUpdateTheSize(); // check d3 documentation
    };

    this.addResizeListener(element, this.updateSize);
}