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

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

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

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

<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 что-то делает, что я полностью забыл?

источник

2010-03-24 Camille

Не могли бы вы предоставить некоторый исходный код (который не удается вас)? Вертикальное выравнивание в GWT может быть сложным, потому что HasVerticalAlignment использует 'vertical-align: middle', а не' valign = "middle" '. –

А, я должен был ожидать столько же. Вертикальное выравнивание в значении valign не придавало большого значения VerticalPanel. Тогда, поскольку я не могу заранее знать высоту содержимого этого FlexTable, я должен полагаться на стандартные трюки с автоматической маркой CSS? Я надеялся, что у HasVerticalAlignment есть внутренняя магия, чтобы исправить эту проблему так же стара, как Интернет, но я думаю, я должен был знать лучше. ;) – Camille

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

источник

2010-03-25 13:36:04 RubyDubee

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

<g:HorizontalPanel width="100%" height="100%"> 
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE"> 
    <g:Label>Hello Center</g:Label> 
</g:cell> 
</g:HorizontalPanel>

источник

2011-07-17 18:41:28 mrbang

Также работает путем создания экземпляра HorizontalPanel и вызова setSize, setHorizontalAlignment, setVerticalAlignment – djjeck

Вы можете использовать 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; 
}

в вашем style.css

источник

2011-11-16 06:22:15

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

ответ

Смежные вопросы