CODEWITHSUNDEEP
gwtlayoutcenter
Camille
Camille

Reputation: 465

How can I vertically center an element with GWT?

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?

Upvotes: 6

Views: 12283

Answers (3)

Hardik Mishra
Hardik Mishra

Reputation: 14877

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

Upvotes: 0

mrbang
mrbang

Reputation: 366

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>

Upvotes: 7

RubyDubee
RubyDubee

Reputation: 2446

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.

Upvotes: 0

Related Questions