Как я могу вертикально отцентрировать элемент с GWT? - PullRequest
Новая
       10

Как я могу вертикально отцентрировать элемент с GWT?

6 голосов
/ 24 марта 2010

Возможно, я не искал правильный путь, но я не могу понять, как мне центрировать элемент с помощью панелей компоновки GWT.

Я использую UiBinder и перепробовал все панели, которые реализуют HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). Ни один из них, кажется, не имеет никакого влияния от установки вертикального выравнивания (или даже горизонтального). Я удостоверился, что они принимают 100% ширину и высоту, проверил полученную структуру DOM из моего браузера, и, похоже, ничего не изменилось из этих свойств.

Соответствующий экстракт UiBinder (без дополнительных элементов стыковки): 

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" />
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

Быстрое и грязное исправление, которое я выяснил, заключается в создании моего собственного виджета "CenterPanel", который по сути является оберткой вокруг HTMLPanel с таблицей HTML с ячейкой valign = "middle". Тем не менее, это в основном похоже на возврат к классическим проблемам центрирования css-layout. Конечно, у GWT есть что-то, что я полностью упустил из виду?

Ответы [ 3 ]

7 голосов
/ 17 июля 2011

Центрирование элемента может быть выполнено с помощью элемента ячейки, например: 

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>
0 голосов
/ 16 ноября 2011

Вы можете использовать атрибут styleName в своем компоненте. Например: 

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

и имеют 

.verticalAlign{
vertical-align: middle;
}

в вашем стиле. Css

0 голосов
/ 25 марта 2010

Вы пробовали установить width меньше 100% ... я чувствую, что ширина HorizontalPanel становится 100% ... поэтому она занимает целое DockLayoutPanel и, таким образом, FlexTable может быть выровнено по левому краю.

...