Centering a panel in GWT using the layoutpanel system

Question

On the GWT developer site there is an example showing a panel that is in the middle of a page. Is this possible to have a fixed with panel in the middle of a page using the GWT layoutpanels?

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

score 3 · Answer 1 · answered Apr 20 '11 at 21:31

There's a good old CSS trick for centering fixed-size, absolute boxes, using automatic CSS layouting (no JavaScript required):

First center the top left corner of the box by using top: 50%; left: 50%;
Of course, the box will be too far to the bottom/right now.
Then subtract half of the box's height/width by using margins. (It's fixed-size, so you can calculate "half of the height/width" with pen and paper :-)

Example:

<!doctype html>

<html>
<head>

<style type="text/css">
    .box {
        position: absolute;
        background-color: red;
        height: 300px;       width: 400px;  /* Using "px" here, but you */
                                            /* can also use "em" etc.   */
        top: 50%;            left: 50%;
        margin-top: -150px;  margin-left: -200px;
    }
</style>

</head>

<body>
    <div class="box">Box</div>
</body>
</html>

Apply this style to your LayoutPanel - I don't have a full code example for that, but I think it should be possible.

The LayoutPanel provides an onResize() event for child panels that implement the NeedsResize interface. You can use this hook if the various panel sizes are subject to change. — BobV, Apr 20 '11 at 22:49

score 0 · Answer 2 · answered Apr 20 '11 at 02:26

0

You can achieve the effect with simple css. For example:

<html><head>
<style>
.outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: blue;
}

.inner {
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
  background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>

Once the basic effect is created in plain CSS using absolutely-positioned objects, you can recreate it with the LayoutPanels, since they're essentially a CSS constraint system.

answered Apr 20 '11 at 02:26

BobV

4,143
1
18
27

1

This doesn't create a fixed-width inner div~ – Riley Lark Apr 20 '11 at 04:00
Good solution for *fixed-percentage* boxes, though. The solution for *fixed-size* is a bit different, but it's still possible with simple css! – Chris Lercher Apr 20 '11 at 21:35

score 0 · Answer 3 · answered Apr 20 '11 at 03:58

I don't think you can make a fixed-width layer center itself automatically in a LayoutPanel. However, you can insert the layer into the DOM to get its size, and then calculate the proper offsets yourself. You can see how Google does this (not in a LayoutPanel) in the code for DialogBox.center();

Centering a panel in GWT using the layoutpanel system

3 Answers3