How to vertically and horizontally centre the form panel inside a scroll panel

[Joey Li]

I have a FormPanel inside a ScrollPanel. The ScrollPanel is located in the center part of DockLayoutPanel. I want to vertially and horizontally center the FormPanel inside the ScrollPanel. I tried a few ways to do this but no success.

I have tired putting a verticalPanel/horizontalPanel inside the scroll panel, and use it to wrap the formPanel. I set both scroll panel and horizontal panel to 100% width and height. However, the scroll panel is automatically resized according to the size of center part of DockLayoutPanel whereas the horizontal panel's size is always equals to the size of its child- form panel. So I cannot center the formpanel inside of horizontalPanel since their height and width are the same. I try to make the horizontalPanel's size be always the same as scrollPanel, but I have no idea how to do this. Setting horizontalPanel's size to 100% is not working.

So My question is this:

1.How do you center something in scrollPanel. I don't mind using css method if you know how to achieve this.

2.In my case above, is it possible to make the horizontalPanel to be always the same size as its parent container - scroll panel. If it is possible, my 1st question is solved then.

[Andrei]

I tried many different options, but at the end, I had to do to render the page, and then call:

Scheduler.get().scheduleDeferred(new ScheduledCommand() {
    @Override
    public void execute() {
        myForm.getElement().setAttribute("style", "margin: " + ((myScrollPanel.getOffsetHeight() - myForm.getOffetHeight()) / 2) + "px auto;");
    }

});

[Andrei]

Forgot to mention that you have to attach a resize handler to your page, and call this method each time a page is resized.

[Joey Li]

Thanks. Your method works fine and it is the only solution I can have right now. 

By the way, could you please give me some example about how to add resize handler to my page so that myform's position is always in the center even if the window is resized?

[Jens]

Thanks. Your method works fine and it is the only solution I can have right now. 

By the way, could you please give me some example about how to add resize handler to my page so that myform's position is always in the center even if the window is resized?

Window.addResizeHandler(..)