像表格一样设置 GWT Mobile ListPanel 的格式

Question

我的 ui-binder 中有以下代码。

<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>

我希望下拉列表和翻转开关处于相同的垂直对齐方式。 目前，翻转开关在右侧有点太多。

Answer 1

不幸的是ListPanel本身（从PanelBase扩展）不支持对齐。这可能只是一个疏忽。他们使用了 FlowPanel，如果没有 CSS hack 来改变其结构，它就无法提供对齐。

为了使它们对齐，您可以：

• 通过使用另一种类型的面板代替 FlowPanel _panel 来创建自己的 PanelBase，确实支持对齐。 ，然后创建您自己的 ListPanel，它从新的 PanelBase 扩展而来。可能是你最好的选择。

或者

• 使用一些 CSS 魔法，如下（但可能不完全一样）。诀窍是 FlowPanel 使用块布局样式，您需要将其设置为内联，而不是支持 vertical-align CSS 属性。这可能会产生不可预见的影响，因此您可能需要选择第一条路线。

.someStyle {
    垂直对齐：中间；
    显示：表格单元格；
}