Centering content in a panel?

[markww]

Hi,

I'd like to make a vertical group of Buttons, and have them centered horizontally and vertically in the page.

This page will likely be used on mobile devices, so the contents might be taller than the device - so I'll need a scroll bar in those cases:

    http://cl.ly/image/1x3u2A053S01

I'm not sure which set of panels to use for this. A VerticalPanel was my first choice, tried the following:

  

    VerticalPanel vp = new VerticalPanel();

    for (int i = 0; i < 15; i++) {

        vp.add(new Label("Test " + i));

    }

    vp.setWidth("100%");

    vp.setHeight("100%");

    vp.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);

    vp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

but the contents are still top-left aligned (vertical panel background-color is red in this example):

    http://cl.ly/image/2V3p0k3E1h15

There's probably a GWT pattern to do this, any ideas?

Thanks

[Dennis Haupt]

> vp.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
> vp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

this alignes the panel itself, not the content.
if you want to do fancy layout stuff, use a flextable:

table.getFlexCellFormatter().set...Alignment(x,y,...)

> --
> You received this message because you are subscribed to the Google
> Groups "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/IaS1mJU90FQJ.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.


--

[Jinker Jiang]

you should to adjust the order,like this:

    VerticalPanel vp = new VerticalPanel();

    vp.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);

    vp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

    for (int i = 0; i < 15; i++) {

        vp.add(new Label("Test " + i));

    }

    vp.setWidth("100%");

    vp.setHeight("100%");

   

2012/8/20 Dennis Haupt <d.ha...@googlemail.com>

[markww]

Ok so that works (calling setHorizontalAlignment() before widgets are added). So now the labels are horizontally centered. 

Still can't seem the vertically center them though. I think it's because the VerticalPanel keeps wrapping its contents vertically, even though I've set its height to 100% (the red area is the VerticalPanel with height=100%):

    http://cl.ly/image/0u0k3c3y1H1X

Any ideas here?

Thanks

[markww]

I ended up using the trick of adding a window size change listener, ugh:

https://developers.google.com/web-toolkit/doc/1.6/FAQ_UI#How_do_I_create_an_app_that_fills_the_page_vertically_when_the_b

On Sunday, 19 August 2012 16:55:01 UTC-4, markww wrote:

[Dennis Haupt]

i'm still voting for the flextable

Am 20.08.2012 05:50, schrieb markww:
> Ok so that works (calling setHorizontalAlignment() before widgets are
> added). So now the labels are horizontally centered.
>
> Still can't seem the vertically center them though. I think it's because
> the VerticalPanel keeps wrapping its contents vertically, even though
> I've set its height to 100% (the red area is the VerticalPanel with
> height=100%):
>
> http://cl.ly/image/0u0k3c3y1H1X
>
> Any ideas here?
>
> Thanks
>
> On Sunday, 19 August 2012 16:55:01 UTC-4, markww wrote:
>
> Hi,
>
> I'd like to make a vertical group of Buttons, and have them centered
> horizontally and vertically in the page.
>
> This page will likely be used on mobile devices, so the contents
> might be taller than the device - so I'll need a scroll bar in those
> cases:
>

> http://cl.ly/image/1x3u2A053S01 <http://cl.ly/image/1x3u2A053S01>

>
> I'm not sure which set of panels to use for this. A VerticalPanel
> was my first choice, tried the following:
>
> VerticalPanel vp = new VerticalPanel();
> for (int i = 0; i < 15; i++) {
> vp.add(new Label("Test " + i));
> }
> vp.setWidth("100%");
> vp.setHeight("100%");
> vp.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
> vp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
>
> but the contents are still top-left aligned (vertical panel
> background-color is red in this example):
>

> http://cl.ly/image/2V3p0k3E1h15 <http://cl.ly/image/2V3p0k3E1h15>

>
> There's probably a GWT pattern to do this, any ideas?
>
> Thanks
>

> --
> You received this message because you are subscribed to the Google
> Groups "Google Web Toolkit" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-web-toolkit/-/u-l2m4UfhmcJ.