Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
AbstractJavaScriptComponent not rendering to component height/width
I am trying to wrap vivagraph.js as a Vaadin component (Currenlty on 7.3.7) and when I look at the component using the debugger, I see that the component is in fact 900x900 as is set in the code. However, the graph that is being rendered to the DIV tag is only displaying in the top left corner of the component of around say 100x100. I am not sure why there is this disconnect between what the vaadin component size is and what the js is rendering in. This js renders in the full browser if run outside of vaadin component. This is a sample script from the vivagraph website. https://github.com/anvaka/VivaGraphJS Can anyone provide any guidance as to why this isn't using the full component width and height?
window.com_virtalogic_vaadin_vivagraph_graph_Graph = function() {
var diagramElement = this.getElement();
var graph = Viva.Graph.graph();
// Construct the graph
graph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b'});
graph.addNode('manunt', {url : 'https://secure.gravatar.com/avatar/c81bfc2cf23958504617dd4fada3afa8'});
graph.addNode('thlorenz', {url : 'https://secure.gravatar.com/avatar/1c9054d6242bffd5fd25ec652a2b79cc'});
graph.addNode('bling', {url : 'https://secure.gravatar.com/avatar/24a5b6e62e9a486743a71e0a0a4f71af'});
graph.addNode('diyan', {url : 'https://secure.gravatar.com/avatar/01bce7702975191fdc402565bd1045a8?'});
graph.addNode('pocheptsov', {url : 'https://secure.gravatar.com/avatar/13da974fc9716b42f5d62e3c8056c718'});
graph.addNode('dimapasko', {url : 'https://secure.gravatar.com/avatar/8e587a4232502a9f1ca14e2810e3c3dd'});
graph.addLink('anvaka', 'manunt');
graph.addLink('bling', 'thlorenz');
graph.addLink('anvaka', 'bling');
graph.addLink('anvaka', 'diyan');
graph.addLink('anvaka', 'pocheptsov');
graph.addLink('anvaka', 'dimapasko');
// Set custom nodes appearance
var graphics = Viva.Graph.View.svgGraphics();
graphics.node(function(node) {
// The function is called every time renderer needs a ui to display node
return Viva.Graph.svg('image')
.attr('width', 24)
.attr('height', 24)
.link(node.data.url); // node.data holds custom object passed to graph.addNode();
})
.placeNode(function(nodeUI, pos){
// Shift image to let links go to the center:
nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12);
});
var renderer = Viva.Graph.View.renderer(graph,
{
graphics : graphics,
container : diagramElement
});
renderer.run();
}
import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
import com.virtalogic.vaadin.vivagraph.graph.GraphState;
@JavaScript({"vivagraph.min.js", "graph_connector.js"})
@SuppressWarnings("serial")
public class Graph extends AbstractJavaScriptComponent {
@Override
public GraphState getState() {
return (GraphState) super.getState();
}
}
import org.json.JSONObject;
import com.vaadin.shared.ui.JavaScriptComponentState;
public class GraphState extends JavaScriptComponentState {
private JSONObject graphData;
private String clickedNode;
public JSONObject getGraphData() {
return graphData;
}
public void setGraphData(JSONObject graphData) {
this.graphData = graphData;
}
public String getClickedNode() {
return clickedNode;
}
public void setClickedNode(String clickedNode) {
this.clickedNode = clickedNode;
}
}
If the actual Vaadin Component div is rendererd correctly than this probably isn't a Vaadin problem. Maybe the graphDiv defaults to a width and height of 100px if it's not set in the code. Maybe try setting the width and height in the Javascript code to 100%.