CODEWITHSUNDEEP
gwtlayoutlayoutpanels
benstpierre
benstpierre

Reputation: 33571

Centering a panel in GWT using the layoutpanel system

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

Upvotes: 3

Views: 3775

Answers (3)

Chris Lercher
Chris Lercher

Reputation: 37778

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.

Upvotes: 3

Riley Lark
Riley Lark

Reputation: 20890

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();

Upvotes: 0

BobV
BobV

Reputation: 4173

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.

Upvotes: 0

Related Questions