layout issues, any suggestions

Hi,

I have the following need, but having some troubles implementing with vaadin. I have a working solution, but wondering if anyone can provide a better way.

What I wan to do is have two components side by side with the first component taking up its natural amount of space, and the second component taking the remaining space.

I’ve been able to get close to this by doing:


    HorizontalLayout resultLayout = new HorizontalLayout();
    resultLayout.setWidth("100%");
    
    contentLabel.setWidth("100%");

    resultLayout.addComponent(treeResultLayout);
    resultLayout.addComponent(contentLabel);
    
    resultLayout.setExpandRatio(contentLabel, 1.0f);
    resultLayout.setExpandRatio(treeResultLayout, .25f);

However, I had to set the expand ration on both the treeResultLayout and the contentLabel which means that the treeResultLayout isn’t actually set to its natural size. It works, but not ideal…

Any better ways to accomplish my goal?

Thanks,

Mark

PS. I referenced this thread which discusses setting the expand ratio:
http://vaadin.com/forum/-/message_boards/message/163889?_19_redirect=/forum/-/message_boards/search%3F_19_redirect%3D%252Fforum%252F-%252Fmessage_boards%252Fcategory%252F11566%26_19_breadcrumbsCategoryId%3D11566%26_19_searchCategoryId%3D11566%26_19_tabs1TabsScroll%3D%26_19_keywords%3Dmainwindow

Setting the expand ratio only for the label should be enough, as long as the width of your
treeResultLayout
is undefined or fixed (not relative/percentage).

Hmmm. If I take out the expand ration for treeResultLayout, it just disappears.

If you make this code below as your main window, you’ll see the problem (I think, unless something else strange going on).

If you un-comment out:


  //resultLayout.setExpandRatio(contentLabel, 1.0f);

and restart the app, the treeResultLayout just disappears!

If you set expand ratios for both, then its OK.

Do you notice same thing?

Thanks,

Mark


public class TestWindow extends Window {
  private HorizontalLayout resultLayout = new HorizontalLayout();

  private Label contentLabel = new Label("test");
  
  private VerticalLayout treeResultLayout = new VerticalLayout();
  
  private VerticalLayout mainLayout = new VerticalLayout();

  public TestWindow(){
    setupResultLayout();
    
    mainLayout.addComponent(resultLayout);
    
    this.addComponent(mainLayout);
  }
  
  private void setupResultLayout() {
    resultLayout.setSizeFull();
    resultLayout.setSpacing(true);
    resultLayout.setMargin(true);
    
    contentLabel.setWidth("100%");

    treeResultLayout.addComponent(new Label("treeResultLayoutLabel"));
    
    resultLayout.addComponent(treeResultLayout);
    resultLayout.addComponent(contentLabel);
    
    //resultLayout.setExpandRatio(contentLabel, .6f);
    //resultLayout.setExpandRatio(treeResultLayout, .25f);
  }
  
}


If the treeResultLayout disappears, it means vaddin cannot find the width (because the parent is HorizontalLayout) of it.

There are two possibility of your mistake.

  1. treeResultLayout has 100% width instead of fixed width or undefined width. Beware that Vaadin VerticalLayout has default 100% width, you have to set its width explicitly.
  2. treeResultLayout has undefined width, but some child of it has 100% (or other ratio) width. This is not allowed in any Vaadin standard layout container.

Hope this could help you.

Hi,

Yes, it was disappearing, and you are right, it was because of #1 that you pointed out. I overrode the default 100% width for treeResultLayout by setting it undefined, as in:


  private void setupResultLayout() {
    resultLayout.setSizeFull();
    resultLayout.setSpacing(true);
    resultLayout.setMargin(true);
    
    contentLabel.setWidth("100%");

    Label label = new Label("treeResultLayoutLabel");
    treeResultLayout.setSizeUndefined();
    treeResultLayout.addComponent(label);
    
    resultLayout.addComponent(treeResultLayout);
    resultLayout.addComponent(contentLabel);
    
    resultLayout.setExpandRatio(contentLabel, .6f);
    //resultLayout.setExpandRatio(treeResultLayout, .25f);
  }

And everything just worked! Yay!

One thing I did note is that label has a default width of 100%, but (as relates to #2) it doesn’t seem to matter. Any idea why?

Thanks very much for helping me resolve this!!

Best,

Mark

Label is tricky. If you don’t set fix width, it can alter its width based on what parent provides. You can test with a single very long label in mainWindow, try to resize you browser window, you will see label wraps itself into multiple lines just like plain innerHTML.
My advice is Don’t rely on a label for the size of your layout.

OK, thanks for the followup!

Cheers,

Mark