Layouting problem

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I’d like to have a explicitly sized window that contains one variable-width layout that has a scrollbar if neccessary, but other components in the window are sized to the window. I’ll demonstrate with a test case.


public class TestCase extends Application {
	private final Window main = new Window();

	@Override
	public void init() {
		setMainWindow(main);

		Window window = new Window();
		window.setWidth("400px");

		HorizontalLayout layoutWithScrollbar = new HorizontalLayout();
		for (int i = 0; i < 10; i++)
			layoutWithScrollbar.addComponent(new Label("foobarbaz label " + i));

		window.addComponent(layoutWithScrollbar);

		Label labelThatWraps = new Label(
				"wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap");
		window.addComponent(labelThatWraps);

		main.addWindow(window);
	}

This works almost like I want except I get no scrollbar on the HorizontalLayout. I can get a scrollbar on the whole window root layout by adding


window.getLayout().setSizeUndefined();

but that will contain the lower label too, which is not what I want. If I replace the layout with a Panel I get a scrollbar on it just like I want, but a Panel has a slew of other features (visual and otherwise) I don’t need.

Can this be done with a HorizontalLayout?

2

I suppose you’ll have to add a Panel that supports scrolling of it’s content. The HL/VL layouts itself does not support contents scrolling.

3

Yup, that’s the case with the current layouts, no scrolling on their behalf. You’ll need a Panel for that. Panel.STYLE_LIGHT gets you quite far.

4

I was wrestling with this same problem last friday - no scrolling bars when needed. However, I got it working after some testing.

My case was vertical scrolling, but the idea is about the same. Here’s my test case that works with 5.3:


package testCase;

import com.itmill.toolkit.Application;
import com.itmill.toolkit.data.util.IndexedContainer;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.VerticalLayout;
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Button.ClickEvent;
import com.itmill.toolkit.ui.Button.ClickListener;

public class TestCase extends Application implements ClickListener {

    IndexedContainer container;
    private Panel content;

    @Override
    public void init() {
        Window main = new Window("The Main Window");
        setMainWindow(main);
        VerticalLayout mainLayout = new VerticalLayout();
        main.setSizeFull();
        mainLayout.setSizeFull();
        main.setLayout(mainLayout);

        content = new Panel();
        content.setStyleName(Panel.STYLE_LIGHT);
        content.setSizeFull();
        mainLayout.addComponent(content);
        mainLayout.addComponent(new Button("add content", this));
        mainLayout.setExpandRatio(content, 1);
    }

    @Override
    public void buttonClick(ClickEvent event) {
        VerticalLayout vl = new VerticalLayout();
        vl.addComponent(new Label("Hello there!"));
        vl.setWidth("100px");
        vl.setHeight("100px");
        content.addComponent(vl);
    }

}
5

Okay, I’ll use a Panel then.

Thanks for help.