Things to Remember: Why cells with an inserted image are taller than the image in GWT

So here’s a mystery.

Suppose you create in GWT a vertical panel or a flex table, and you add an image which is less than 15 pixels tall:

VerticalPanel panel;

...
panel.add(new Image("images/mydot.png"));

But for whatever reason, the cell displays as 15 pixels tall.

Apparently what happens is that the way the image object is inserted into the

object that makes up the vertical panel, an extra bit of text winds up being inserted alongside the image object.

And that blank has vertical height.

If you write the following, you can limit the vertical spacing, allowing for tighter heights:

Image image = new Image("images/mydot.png");
panel.add(image);
DOM.setStyleAttribute(image.getParent().getElement(),"fontSize","1px");

In testing this seems to tighten things up quite a bit.

I need to investigate this further. But apparently when DOM objects are being inserted during the construction of GWT objects, unwanted extra junk (in the form of blank text spaces) is being inserted at the same time.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s