ToggleButton breaks flow of FlowPanel

[Thad]

I've got a button panel layout for which I'm trying to use a FlowPanel:

<g:FlowPanel>

  <g:PushButton>

  <g:PushButton>

  <g:ToggleButton>

  <g:PushButton>

The problem is that even if I double down by giving the FlowPanel a style that includes "block: inline-block", the ToggleButton breaks the flow and the next PushButton ends up below the ToggleButton, not in the line with the other buttons. Ditto if I use and HTMLPanel with a <span> and block: inline-block.

I can fix the alignment by using HorizontalPanel but I understand that cell panels are "a bad thing." But is there any solution short of using a LayoutPanel with all it's baggage of layers and sizes? (A real pain, especially with Designer broken.)

[Thomas Broyer]

The problem is not the container, but the button: set "display: inline-block" on the ToggleButton itself (hoping it'll work, otherwise maybe wrap it in a <div style="display: inline-block">) 

[Thad]

Thanks for the reply. When I apply "display: inline-block" to the ToggleButton itself, trades places with the next PushButton so I no longer have the order I desire (the ToggleButton triggers an action that either enables or disables the next PushButton--two in fact--so I want to keep this order).

If I apply "display: inline-block" to the next PushButton(s), the visual order is preserved, but that messes my enable|disable CSS, and I want to avoid the rat hole of modifying a lot of CSS. Ergo I'll stick with a HorizontalPanel or use an HTMLPanel with an interior <table>.