Splitting an image in GWT results in unwanted white space
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?
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
.
GWT has a class called DecoratorPanel, which targets this use case. See the JavaDoc for details on how to use it.
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.
精彩评论