Absolute positioning images

[Maverick]

I need to absolute position an image in a page. A possible solution would be to use a popup panel, but to make the page cleaner I prefer to absolute position the image itself. I tried the code below (and some variations of it), but the image appears contained in a div, which has top, left, right and bottom styles equals to 0, and so it covers all the page.

Is there any way to absolute position an image?

Thanks

Image img = new Image( HandleImages.instance.green().getURL() );

DOM.setStyleAttribute( img.getElement(), "position", "absolute" );

DOM.setStyleAttribute( img.getElement(), "left", "100px" );

DOM.setStyleAttribute( img.getElement(), "top", "100px" );

img.setPixelSize( 12, 12 );

img.setSize( "12px", "12px" );

// img.getElement().getStyle().clearRight(); // no effect

// img.getElement().getStyle().clearBottom(); // no effect

RootLayoutPanel.get().add( img );

[Andrei]

When you add a widget to a LayoutPanel, it takes up all the space unless you specify it's position (see below). Also, you can add only one widget to the RootLayoutPage. You can't add an image directly to it, unless your entire app consists of this image and nothing else.

So, try this:

img.setSize("12px", "12px");

LayoutPanel panel = new LayoutPanel();
panel.add(img);
panel.setWidgetTopHeight(img, 100, Unit.PX, 12, Unit.PX);
panel.setWidgetLeftWidth(img, 100, Unit.PX, 12, Unit.PX);
RootLayoutPanel.get().add(panel);

Alternatively, you can use a FlowPanel and set CSS style on the image, as you tried, and then add this FlowPanel to the root.

[Maverick]

Hi, thank you for your reply

Actually, what you suggest doesn't work, because the image is correctly positioned in the panel but now is the panel taking the whole space.

Unless there is some other trick, using a popup panel is the only solution that works.

[Andrei]

It does not matter which widget you are going to add to the RootLayoutPanel - it will take the whole space. Which is great, because this is exactly how GWT apps are built.

In my example you can add as many widgets to your LayoutPanel as you need, and position them anywhere you want. I hope your app is not going to consist of one 12px image.

[Jens]

Image img = new Image(....);

RootLayoutPanel.get().add(img);

RootLayoutPanel.get().setWidgetTopHeight(img, 100, Unit.PX, 12, Unit.PX);
RootLayoutPanel.get().setWidgetLeftWidth(img, 100, Unit.PX, 12, Unit.PX);

should work I guess. RootLayoutPanel is just a singleton LayoutPanel.

-- J.

[Maverick]

@Jens: no, it doesn't work because, as Andrei said, whatever you add to RootLayoutPanel takes up all the space

@Andrei: so you are suggesting to move the whole gui from RootLayoutPanel to the LayoutPanel; I'm not sure I can do it in my case, but that's an acceptable workaround.

Thanks