Fatal编程技术网
  • gwt/
  • 将GWT Mobile ListPanel格式化为表格格式

将GWT Mobile ListPanel格式化为表格格式

gwt mobile

将GWT Mobile ListPanel格式化为表格格式,gwt,mobile,alignment,uibinder,Gwt,Mobile,Alignment,Uibinder,我的ui活页夹中有以下代码 <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:fi

我的ui活页夹中有以下代码

<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>
我希望dropdownlist和flipSwitch处于相同的垂直对齐状态。
目前，flipSwitch的右侧有点过多。

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

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


    

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


或


    

  • 使用一些CSS向导，类似于（但可能不完全是）下面的内容。诀窍在于
    FlowPanel
    使用块布局样式，您需要将其设置为内联样式，以支持
    vertical align
    CSS属性。这可能会产生不可预见的影响，因此您可能需要第一条路线



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