Width of child vertical layout

Question

I have a HorizontalLayout (let's call it parent). Inside this I have two VerticalLayouts (left's call them left and right).

Left contains just some text, right contains a lot of elements.

Parent has a width of 100% so it takes the full browser width:

parent.setWidth("100%");

Left should take just as much space as it needs, right should take all other space.

How can I do so? I tried all variations described here and there without success. I tried to:

• left.setWidthUndefined();
• right.setWidth("100%");
• left.setWidth("150px");
• left.setWidth("30%"); together with right.setWidth("70%");

Nothing had an effect.

Updated source code:

HorizontalLayout parent = new HorizontalLayout();
parent.setCaption("Parent");

VerticalLayout left = new VerticalLayout();
left.setCaption("Left");

VerticalLayout right = new VerticalLayout();
right.setCaption("Right");

parent.addComponent(left);
parent.addComponent(right);
parent.setWidth("100%");
right.setWidth("100%");
parent.setExpandRatio(right, 1.0f);

setCompositionRoot(parent);

Answer 1

I just did a quick test, and the following seems to work:

...
left.setSizeUndefined();
parent.setWidth("100%");
parent.setExpandRatio(right, 1);
...

This is the full code of the test application (without imports):

@Theme("reindeer")
public class ForumUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = ForumUI.class)
    public static class Servlet extends VaadinServlet {
    }

    public static class SomeComponent extends CustomComponent {
        public SomeComponent() {
            HorizontalLayout parent = new HorizontalLayout();
            parent.setCaption("Parent");
            parent.addStyleName("v-ddwrapper-over");

            VerticalLayout left = new VerticalLayout();
            left.setCaption("Left");
            left.addStyleName("v-ddwrapper-over");

            VerticalLayout right = new VerticalLayout();
            right.setCaption("Right");
            right.addStyleName("v-ddwrapper-over");

            parent.addComponent(left);
            parent.addComponent(right);

            left.setSizeUndefined();
            parent.setWidth("100%");
            parent.setExpandRatio(right, 1);

            setCompositionRoot(parent);
        }
    }

    @Override
    protected void init(VaadinRequest request) {
        setContent(new SomeComponent());
    }

}