How to position a PopupPanel like google does with error popups in Gmail

[Jaap]

Hi

I'd like to have PopupPanel which I show at the top and in the centre
of the screen when an error occured with a red background, with a
small text like "Oops an error occured please try again"

How do I do this? I'm struggling with getting the right CSS for this.

Thanks

Jaap

[Brian]

I spent some time getting something like this right myself. I didn't
use PopupPanel, but my widget also fixed at the top of the page rather
than the top of the screen (i.e., still visible while scrolling), but
it does what I need it to do. Here's what I came up with for CSS:

#messageContainer {
position: absolute;
left: 0;
top: 0;
margin-top: 0;
width: 100%;
}

#message, #message td {
background-color: red;
color: white;
font-weight: bold;
}

And then the panel composition:

Image icon = new Image("images/error.gif");
Label label = new Label(message);

HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.getElement().setId("message");
horizontalPanel.setSpacing(3);
horizontalPanel.setVerticalAlignment
(HasVerticalAlignment.ALIGN_MIDDLE);
horizontalPanel.add(icon);
horizontalPanel.add(label);

VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.getElement().setId("messageContainer");
verticalPanel.setHorizontalAlignment
(HasHorizontalAlignment.ALIGN_CENTER);
verticalPanel.add(horizontalPanel);

There are two items to display: an error icon and an error message. A
HorizontalPanel is created to contain these items. It has a little
spacing to separate the icon and the text, middle vertical alignment
for nice placement in case the icon and text heights are different,
and is tied to the #message style by ID. Note that the style is also
applied to contained table cells. Having both makes sure that the
background color is applied to the entire panel (including the spacing
between elements) and the text color is applied to the message (in the
cell of the HorizontalPanel's table). No dimensions are specified, so
it will naturally size to fit the content.

Finally, the HorizontalPanel is wrapped inside another panel (I used a
VerticalPanel in this case, but there's only one cell so it really
doesn't matter). Its style uses absolute positioning to put it at the
top of the page and makes it fill the entire width. It's also
configured to center its contents so the naturally sized
HorizontalPanel will be nicely centered at the top of the screen.

I've used IDs to target the styles because I create a single instance
of this widget (a Composite built from the code above) for the entire
application, but you could easily change that if you wanted to have
more than one instance (visible or not) of your message component. You
can also, of course, configure colors and font to your liking.

-Brian

[Thomas Broyer]

Using setPopupPositionAndShow, you'll be able to determine the size of
the popup and adjust its position (compute its "left" position
depending on its width), before it is actually displayed.

If you want it to stay at the top of the window while you scroll, you
can use "position:fixed" in your CSS, and workaround the lack of
support in IE6 by using a Window.ScrollHandler to re-position the
popup (setPopupPosition) on scroll.

I'm doing it this way for more than a year (with variations when there
were no Window.ScrollHandler) and it works pretty well.

[Jaap]

Thanks for your replies. However it was not what exactly what I was
looking for my site http://www.cheapriver.com
I finally got it to work how I wanted it to work with some help of a
colleaugue at work. I've posted the code on my blog
http://jaap.haitsma.org/2009/12/19/status-popup-for-gwt-google-web-toolkit/

Jaap