1

I am using GWT 2.03 and am have an image that I want to place partially in an area with a background and partially above a background. I am using a FlexTable to try to accomplish this and have used GIMP to cut the image into two sections. I am trying to load the top part of the image into row 0 and the bottom part of the image into row 1. I set the alignment of the top image to ALIGN_BOTTOM but there is a bit of space at the bottom of cell and so the two parts of the picture don't touch.

Here is an image showing what I am talking about. I set the background of the cell to be yellow show where the cell boundaries are. The bottom image and background are rendering correctly.

![alt text][1]

[1]: http://www. freeimagehosting. net/uploads/f02462d659.png

Here is the relevant code snippet:

FlexTable table = new FlexTable();
table.setCellSpacing(0);
table.setCellPadding(0);
table.setBorderWidth(0);
FlexCellFormatter formatter = table.getFlexCellFormatter();

table.setWidget(0, 0, topImage);
formatter.setStyleName(0, 0, "topImageStyle");
formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
table.setWidget(1, 0, bottomImage);
formatter.setStyleName(1, 0, "bottomImageStyle");

How can I get rid of that space between my image and the cell boundary?

4
  • Try collapsing the borders on the table via the css property border-collapse - w3schools.com/css/pr_tab_border-collapse.asp Mar 23, 2010 at 18:44
  • This question gets a +1 just for the fact that rancidfishbreath took a second to include all the important information and formatted the question in a sane way - good job! (it's been a while since I saw such a nicely/normally written question in the [gwt] tag from someone with low rep >_>). Mar 23, 2010 at 18:50
  • Jon, I tried that but it didn't make a difference. From my understanding border-collapse only has an effect on borders which isn't the issue here. Thanks for trying to help though. Mar 23, 2010 at 21:08
  • Igor, thanks for the kind words... and the solution! Mar 23, 2010 at 21:08

3 Answers 3

2

This is caused by the Standards rendering mode (see this article for a thorough explanation).

A quick fix (which should be applicable for this case) is to set your image slices to have the display: block style.

PS: It probably doesn't matter at this size (2x1) but Grid should be used when the size of the table is constant/known beforehand - it just offers better performance than FlexTable.

1
  • This worked! The example is just a subset of what I am doing with the FlexTable - I didn't want to overload the question with unneeded detail. Thanks for pointing out Grid though because it is always good to be reminded that it is there. Mar 23, 2010 at 20:41
0

GWT has a class called DecoratorPanel, which targets this use case. See the JavaDoc for details on how to use it.

1
  • I was going to suggest the same thing but I noticed two things: DecoratorPanel is supposedly only stable in Quirks mode (according to javadocs) and rancidfishbreath only needs a simple way of putting two parts of an image together - there's no need for a Panel, since there's not content to be put there (or so it seems from the code provided). Mar 23, 2010 at 20:33
0

I have some suggestion for you:

  • I'm not sure, if this work for FlexTable, but try setCellPadding(0) or setCellSpacing(0)
  • Try addStyleName or setStylePrimary instead setStyleName
  • Try to set the style to the image and not to the formatter
  • Try also formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM) with formatter.setStyleName(1, 0, HasVerticalAlignment.ALIGN_TOP).
  • Firebug can help you to find, what you need to change to fix the problem. If you post peace of code (DOM), we can try to help you.
1
  • If you look at the code snippet, I am already doing setCellPadding(0) and setCellSpacing(0). The style on the bottom image creates the green border correctly. The style on the top image is only there to create the yellow border for illustrations sake. The yellow border is at the cell level to prove that the top cell was creating extra space and not the bottom one. Mar 23, 2010 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.