Align to center and horizontal scrollbar

Hello,

It seems
Alignment to center
and
horizontal scrollbar
does not like each other.

Here is the code:

	public void init() {
		Window mainWindow = new Window("Playground Application");
		this.setMainWindow(mainWindow);
		final Panel panel = new Panel();
		panel.setHeight(100, Sizeable.UNITS_PERCENTAGE);
		panel.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		panel.setScrollable(true);

		VerticalLayout vloMain = new VerticalLayout();
		vloMain.setMargin(true);
		
		HorizontalLayout hlo = new HorizontalLayout();

		// Add some components
		for(int i=0;i < 8;i++ ){
			VerticalLayout vlo = new VerticalLayout();
			for(int j=0;j<5;j++){
				TextArea t = new TextArea("Name"+i+j);
				t.setRows(20);
				vlo.addComponent(t);
				vlo.addComponent(new TextField("Email"+i+j));
			}
			hlo.addComponent(vlo);
		}
		
		vloMain.addComponent(hlo);
		vloMain.setComponentAlignment(hlo, Alignment.TOP_CENTER);
		

		panel.setContent(vloMain);
		panel.getContent().setSizeUndefined();
		vloMain.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		
		mainWindow.setContent(panel);
		setTheme("playgroundtheme");

	}

With this piece of code, I can center the input boxed in the center of the page. However if I resize the window narrower, I
cannot
see the horizontal scrollbar.

If i remove the line:

vloMain.setWidth(100, Sizeable.UNITS_PERCENTAGE);

Then the components are align to left and I can see the scroll bar by resizing the window.

Tested in chorme, firefox and IE, same effect for all.

But with iPad, iPhone, cannot scroll in any case! It seems the panel scroll bar does not work in iPad at all. Any ideas?

Br,
Xuan

No one has encountered this before?

In your code you are taking care of setting the content of the panel to an undefined size which means that you want scrollbars :


        panel.setContent(vloMain);
        panel.getContent().setSizeUndefined();

But on the line after you set a width of 100% which disable the horizontal scrollbar computation :


        vloMain.setWidth(100, Sizeable.UNITS_PERCENTAGE);

So I am affraid it is not possible to center an element in a panel as you are trying to.
You may be able to go around it by using CSS trickery but it may break layouts further.

Hi,

I understand your assessment, and I understand the reason behind this behaviour. If I set width 100%, I lost the scroll bar, but if I don’t do that, I cannot center the element (layout) in the panel window. As I said, Alignment to center and horizontal scrollbar does not like each other.

My question is, is there a way to center a layout as well as having the scrollbar?

Br,
Xuan