How can I vertically center an element with GWT?

6
votes

Perhaps I haven't been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.

I'm using UiBinder and I've tried all panels that implement HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). None of them seem to have any impact from setting vertical alignment (or even horizontal). I've made sure they're taking 100% width and height, inspected the resulting DOM layout from my browser and nothing seems to be changed from those properties.

Pertinent UiBinder extract (with extra docklayout elements omitted):

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" />
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

The quick and dirty fix I've figured out is to create my own "CenterPanel" widget which basically is a wrapper around a HTMLPanel with a HTML table with a valign="middle" cell. However, this basically feels like a throwback to the classical css-layout middle centering problems. Surely GWT has something to do this that I've completely overlooked?

3
gwtlayoutcenter
Could you provide some source code (that is failing you)? Vertical alignment in GWT can be tricky because HasVerticalAlignment uses vertical-align:middle, not valign="middle". - Igor Klimer
Ah, I should've expected as much. Vertical alignment in the valign sense didn't make that much sense on a VerticalPanel. Then since I can't know in advance the height of the contents of this FlexTable, I should rely on the standard CSS auto margin tricks? I was hoping HasVerticalAlignment had some internal magic to fix this problem as old as the internet but I guess I should've known better. ;) - Camille

3 Answers

7
votes

Centering an item can be done with a cell element like this:

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>
0
votes

Have you tried setting width less than 100% ... i feel the width of HorizontalPanel becomes 100% ... so it occupies whole DockLayoutPanel and thus the FlexTable might be getting left aligned.

0
votes

You can use styleName attribute in your component. For Example:

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

and have 

.verticalAlign{
vertical-align: middle;
}

in your style.css