Формат GWT Mobile ListPanel похож на таблицу

Question

У меня есть следующий код в моем пользовательском интерфейсе.

<m:ListPanel selectable="false">
  <m:ListItem>  
    <g:Label ui:field="sortLabel"></g:Label>
    <m:DropDownList ui:field="sortDropDown" />
  </m:ListItem>
  <m:ListItem>
    <g:Label ui:field="doneLabel"></g:Label>
    <m:FlipSwitch ui:field="displayDone" value="false"/>
   </m:ListItem>
</m:ListPanel>

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

Answer 1

К сожалению, ListPanel сам по себе (который простирается от PanelBase) не поддерживает выравнивание. Это был, вероятно, просто недосмотр. Они использовали FlowPanel, который не способен обеспечить выравнивание без CSS-хаков, чтобы изменить его структуру.

Чтобы выровнять их, вы можете:

• Создайте свой собственный PanelBase, который поддерживает , поддерживает выравнивание, используя панель другого типа вместо FlowPanel _panel, затем создайте свой собственный ListPanel, который выходит из вашего нового PanelBase. Вероятно, ваша лучшая ставка.

OR

• Используйте некоторые CSS-мастера, что-то вроде (но, вероятно, не совсем) ниже. Хитрость заключается в том, что FlowPanel использует стиль компоновки блоков, и вам нужно вместо этого сделать что-то встроенное для поддержки свойства vertical-align CSS. Это может привести к непредсказуемым последствиям, поэтому, возможно, вам снова нужен первый маршрут.

.someStyle {
    vertical-align:middle;
    display:table-cell;
}