Question

I have the following code in my 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>

I want that the dropdownlist and the flipSwitch is in the same vertical alignment.
Currently is the flipSwitch a little bit too much on the right side.

Answer 1

Unfortunately ListPanel itself (which extends from PanelBase) does not support alignment. This was probably just an oversight. They used a FlowPanel which isn’t capable of providing alignment without CSS hacks to change its structure.

In order to get them aligned, you could:

• Make your own PanelBase that does support alignment by using another type of panel in place of FlowPanel _panel, then make your own ListPanel which extends from your new PanelBase. Probably your best bet.

OR

• Use some CSS wizardry, something like (but probably not exactly) below. The trick is that FlowPanel uses a block layout style, and you need to make it something inline instead to support the vertical-align CSS property. This could have unforeseeable effects, so again you probably want the first route.

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