Разделение изображения в GWT приводит к нежелательному пустому пространству

Question

Я использую GWT 2.03, и у меня есть изображение, которое я хочу разместить частично в области с фоном и частично над фоном. Я использую FlexTable, чтобы попытаться выполнить это, и использовал GIMP, чтобы разрезать изображение на две части. Я пытаюсь загрузить верхнюю часть изображения в строку 0, а нижнюю часть изображения - в строку 1. Я установил выравнивание верхнего изображения на ALIGN_BOTTOM, но в нижней части ячейки есть место, и две части картинки не соприкасаются.

Вот изображение, показывающее, о чем я говорю. Я установил фон ячейки желтым, чтобы показать, где находятся границы ячейки. Нижнее изображение и фон отображаются правильно.

! [Альтернативный текст] [1]

[1]: http://www. freeimagehosting. сеть / добавления / f02462d659.png

Вот соответствующий фрагмент кода:

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");

Как мне избавиться от этого пространства между моим изображением и границей ячейки?

Answer 1

Это вызвано режимом рендеринга стандартов (подробное объяснение см. в этой статье ).

Быстрое исправление (которое должно быть применимо для этого случая) состоит в том, чтобы установить для срезов изображения стиль display: block.

PS: Вероятно, это не имеет значения при этом размере (2x1), но Grid следует использовать, когда размер таблицы постоянен / известен заранее - он просто предлагает лучшую производительность, чем FlexTable.

Answer 2

У меня есть для вас предложение:

• Я не уверен, работает ли это для FlexTable, но попробуйте setCellPadding (0) или setCellSpacing (0)
• Попробуйте вместо addStyleName или setStylePrimary установить setStyleName
• Попробуйте установить стиль для изображения, а не для форматера
• Попробуйте также formatter.setVerticalAlignment (0, 0, HasVerticalAlignment.ALIGN_BOTTOM) с formatter.setStyleName (1, 0, HasVerticalAlignment.ALIGN_TOP).
• Firebug может помочь вам найти то, что вам нужно изменить, чтобы решить проблему. Если вы публикуете код мира (DOM), мы можем попытаться вам помочь.

Answer 3

GWT имеет класс DecoratorPanel , который предназначен для этого варианта использования. См. JavaDoc для получения подробной информации о том, как его использовать.