Вертикальные алгоритмы GWT-панели

Question

У меня возникли проблемы с правильным выравниванием содержимого в DecoratorPanel в GWT.

Используя следующий фрагмент кода, все содержимое, как представляется, вертикально к середине

DecoratorPanel decor = new DecoratorPanel(); 
decor.setHeight("100%"); 
decor.add(new Label("Test")); 

Диаграмме объяснить (?):

   --------     -------- 
I get this: |  | I want this: |test | 
      |  |     |  | 
      |test |     |  | 
      |  |     |  | 
      |  |     |  | 
      --------     -------- 

Я попытался decor.getElement().getStyle().setVerticalAlign(VerticalAlign.TOP);, но это делает похоже, ничего не влияет.

Как разместить содержимое в верхней части панели?

Update:

У меня есть уведомление, что если я использую LayoutPanel вместо DecorPanel все кажется выровнять правильно.

Может быть проблема в том, что я использую обычный Panels с LayoutPanels? Если да, то почему у меня проблемы?

Answer 1

A DecoratorPanel использует HTML table, а другой - div. Таким образом, с DecoratorPanel вы устанавливаете вертикальный стиль на элементе table вместо содержимого, что объясняет, что вы видите, и почему вы не используете эту панель. Таким образом, вы либо должны использовать панель на основе div, либо установить выравнивание на этикетке или td (что равно label.getElement().getParent(), но это немного уродливое и подверженное будущим ошибкам).

Answer 2

Получить элемент td.

... . getElement().setStyleName("myStyle");

Затем в CSS

.myStyle td{ 
vAlign : centre; 
} 

Answer 3

DecoratorPanel является 9-бокс панель, которая используется для размещения изображений вокруг, специально для закругленной угловой эффект виджетов это главным образом полезно, есть аа клетки вокруг вы виджет, когда вы устанавливаете 100%, он может применять некоторую ширину и высоту всех ячеек, которые вы видите в центре.