Align a widget middle-top in HorizontalPanel

[hezjing]

Hi

I have a Welcome panel like this,

class Welcome extends HorizontalPanel {

    Welcome() {

        setHorizontalAlignment(HorizontalPanel.ALIGN_CENTER);

        setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);

        setHeight("100%");

        setWidth("100%");

        HorizontalPanel panel = new HorizontalPanel();

        panel.setHeight("50%");

        panel.setWidth("80%");

        panel.setStyleName("dummy");

        panel.add(new Label("xxxxxxxxx"));

        // the panel is aligned top-center, why it does not align middle-center?

        add(panel);

    }

}

and this Welcome panel is added to RootPanel like this,

public void onModuleLoad() {

    Welcome welcome = new Welcome();

    RootPanel panel = RootPanel.get();

    panel.add(welcome);

}

and the dummy CSS is as simple as,

.dummy {

border: 1px solid #BBBBBB;

background: #C3D9FF;

}

when tested in GWT 1.5.3 hosted mode, why the Welcome panel is aligned top-center even though I have setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE)?

--

Hez

[gregor]

Hi Hez,

In fact your code works as you expect in FF, but not in IE. Don't know
exactly why, but I think it is because IE thinks panel.setHeight
("50%"); overrides previous instruction setVerticalAlignment
(HorizontalPanel.ALIGN_MIDDLE); If you comment out the panel.setHeight
("50%"); line you get the panel in the right place but you don't get
the height. I guess it's possibly a bug in GWT IE implementation of
CellPanel, or it might be IE's capricious awkwardness.

To get round it you can either:

a) give the panel height in pixels instead of %, which for some reason
IE accepts
b) calculate and set the height of panel after Welcome has been
attached to root (and therefore itself sized up), as per below

regards
gregor

public class SandBox implements EntryPoint {

class Welcome extends HorizontalPanel {

HorizontalPanel panel = new HorizontalPanel();

Welcome() {
setHorizontalAlignment(HorizontalPanel.ALIGN_CENTER);
setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);
setHeight("100%");
setWidth("100%");

//panel.setHeight("200px");
panel.setWidth("80%");

panel.setWidth("80%");
panel.setStyleName("dummy");
panel.add(new Label("xxxxxxxxx"));
// the panel is aligned top-center, why it does not align

//middle-center?
add(panel);
}
}

//and this Welcome panel is added to RootPanel like this,

public void onModuleLoad() {
Welcome welcome = new Welcome();
RootPanel panel = RootPanel.get();
panel.add(welcome);

welcome.panel.setHeight("" + welcome.getOffsetHeight() / 2);

[hezjing]

Hi Gregor

Yes, the problem is overcome by panel.setHeight("200px").

Thank you!

--

Hez