How to centre fixed size panel inside another layout panel or screen

[espinosa_cz]

Hi guys,

I manage to put my context panel to the middle of the browser page in
Vaadin. Seem my screenshots. It is done purely in Java code, the only
CSS used is for setting colors and font sizes.
Now I wondering how to make something similar with vanilla GWT.

In Vaadin it is one line command!
((VerticalLayout)outerContentPanel).setComponentAlignment(contextPanel,
Alignment.MIDDLE_CENTER);
What is the GWT equivalent?

How to centre a fixed size panel (LayoutPanel) inside resizable parent
container, let's say RootLayoutPanel as it is in this picture?
http://espinosa.s3-website-eu-west-1.amazonaws.com/vvregform2/vvregform/vvregform_progress_2011-01-24_-_screenshot_1.png

The central panel (form) can grow, see here:
http://espinosa.s3-website-eu-west-1.amazonaws.com/vvregform2/vvregform/vvregform_progress_2011-01-24_-_screenshot_3.png
so the solution must be flexible, accommodate any change in the
central panel.

Preferably programmatically (no UiBinding) and ideally without special
CSS tricks.

I made some progress with encapsulated LayoutPanels and setting
WidgetLeftRight and WidgetTopBottom. But I cannot figure out what
values make it centered for any particular inner contextPanel sizes:

// “parent”, outer content panel, make it fill whole screen (page)
LayoutPanel outerContentPanel = new LayoutPanel();
outerContentPanel.setStyleName("outerContextPanel");
outerContentPanel.setHeight("100%");
outerContentPanel.setWidth("100%");

// inner content panel
LayoutPanel contentPanel = new LayoutPanel();
outerContentPanel.add(contentPanel);
contentPanel.setStyleName("contextPanel");
contentPanel.setSize("300px", "300px");

// make it centered (????)
outerContentPanel.setWidgetLeftRight(contentPanel, 50, Unit.PCT, 0,
Unit.PCT);
outerContentPanel.setWidgetTopBottom(contentPanel, 50, Unit.PCT, 0,
Unit.PCT);

// put some fancy content iside
HTML html = new HTML("<h1>Hello world centered!</h1>");
contentPanel.add(html);

// set as
RootLayoutPanel.get().add(outerContentPanel)

As values I tried 50% from all directions sides, it makes central
contextPanel nicely centred but also invisible, clipped completely.
When I use 50% from top and left only, 0% from bottom and right, the
left top corner of the inner panel is centered, nice, but i need to
get centered by its center.

I am out of my wits now
Any hints welcome
Thank you
Espinosa

[espinosa_cz]

Lets look at it from a different angle.
There is a familiar example in GWT documentation:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Widget child0, child1, child2;
LayoutPanel p = new LayoutPanel();
p.add(child0); p.add(child1); p.add(child2);

p.setWidgetLeftWidth(child0, 0, PCT, 50, PCT); // Left panel
p.setWidgetRightWidth(child1, 0, PCT, 50, PCT); // Right panel

p.setWidgetLeftRight(child2, 5, EM, 5, EM); // Center panel
p.setWidgetTopBottom(child2, 5, EM, 5, EM);

How to define the center panel using flexible percents (PCT) and not
fixed size?
Why is there exactly 5 EM by the way?

Espinosa

[stuckagain]

Hi,

 

Maybe you should file a bug report, a center layout or something would be great! Or indeed support for Alignment.MIDDLE.

 

I'm in the progress of updating and old code base to standards compliant mode and centering widget on the window is used all over the place.

Before I could just set the height of a table to 100% and using 3 columns, and let the browser figure out row distribution, but this no longer works in standards mode.

 

David

[Jens]

 I'm in the progress of updating and old code base to standards compliant mode and centering widget on the window is used all over the place.

Before I could just set the height of a table to 100% and using 3 columns, and let the browser figure out row distribution, but this no longer works in standards mode.

Not tested in IE6/7 but should work in IE8 and all other browsers in standards mode:

CenterPanel.gwt.xml:

<g:HTMLPanel height="100%" width="100%">

<div style="display:table; height:100%; width:100%;">

<div style="display:table-cell; vertical-align:middle; text-align:center;">

<div style="text-align:left; display:inline-block;">

<g:FlowPanel ui:field="centeredContainer"/>

</div>

</div>

</div>

</g:HTMLPanel>

The corresponding Java file extends Composite and implements HasWidgets by delegating HasWidgets methods to centeredContainer. Haven't tried it but the first <div> inside the HTMLPanel can probably be removed if you assign "display:table" via CSS to the HTMLPanel.

You can then use it like

<g:SomeParentContainerWithKnownHeight> //could probably also be a LayoutPanel layer as it has fixed sizes.

  <my:CenterPanel>

     <g:Label>Centered text inside SomeParentContainerWithKnownHeight</g:Label>

  </my:CenterPanel>

</g:SomeParentContainerWithKnownHeight>

-- J.

[stuckagain]

Hi Jens,

 

Great, it works exactly as I want! Such a simple approach as well, it should be part of GWT though.

 

David