UI Component not sizing properly

Hi,

I have the following set-up:

 VerticalLayout graphLayout = new VerticalLayout();
    graphLayout.addStyleName("border");
    graphLayout.setHeight("100%");
    graphLayout.setWidth("85%");

 FlotSystemGraph systemGraph = new FlotSystemGraph();
    systemGraph.setSizeFull();
    
 graphLayout.addComponent(systemGraph);

So my expectation is that the graph should take the entire area of the vertical layout.

But unfortunately it doesnt, and only takes up the tiny corner vertical layout. (please see attached)

If I give the graph pixel units, it works without an issue. But I do not want to use absolute units.

Could somebody help me out?
13488.png

That’s how it should work. Maybe there’s something odd in the FlotSystemGraph component.

Cannot figure out what, but.
Becuase when I give it a pixel size, it sizes without an issue…(See attached)

FlotSystemGraph sysMemGraph = new FlotSystemGraph();
    sysMemGraph.setWidth("1000px");
    sysMemGraph.setHeight("200px");

13490.png

I guess this guy talks about a similiar issue:

https://vaadin.com/forum#!/thread/5005338

It’s hard to say what the problem could be from the information that you’ve given so far. What is the FlotSystemGraph? As I said above, the sizing should work for normal Vaadin components, so there could be something wrong with the component that you’re using. Maybe it handles sizes somehow wrong.

FlotSystemGraph is just an integrated jquery component which extends AbstractJavaScriptComponent. So it is a Vaadin component. It does nothing special other than integrate a jquery graph.

@JavaScript({"lib/jquery.min.js", "lib/jquery.flot.js", "js/system_graph_connector.js"})
public class FlotSystemGraph extends AbstractJavaScriptComponent{

  /**
   * 
   */
  private static final long serialVersionUID = -6950480831763438742L;
  
  
  @Override
  public FlotSystemGraphState getState() {
      return (FlotSystemGraphState) super.getState();
  }

}

Ok. Maybe the connector or something else doesn’t handle sizing properly, it’s hard to say. You should check with Firebug or some other inspector how the HTML elements inside the VerticalLayout and the JS component are sized and try to narrow down where the problem could be.