Tip: In GWT, VerticalPanel could be replaced with FlowPanel

I’ve been fighting with a lot of layout issues over the last few hours that are caused by differences between the way IE and Firefox handle table widths. IE seems to expand tables whether I like it or not, which is a pain. VerticalPanel uses a table to line elements up vertically.

I’ve started trying FlowPanel as an alternative; FlowPanel inserts elements without any wrapping (they just go into the parent element), which means that if any element is a block element, they’ll all be put into blocks and stacked vertically, just like VerticalPanel but without the tables.

Advertisements

7 Responses to Tip: In GWT, VerticalPanel could be replaced with FlowPanel

  1. Renato says:

    Ok! But what if I want a flow layout behaviour. Adding itens to panel and organize them horizontally and at the end of a line go vertically?

  2. dobes says:

    Well, any HTML or Label object you insert into the FlowPanel will layout into a flow arrangement, I believe. Just the boxes that automatically expand to fill the box will be stacked vertically.

  3. Vitaly says:

    >Just the boxes that automatically expand to fill the box will be stacked vertically.
    That’s exactly the situation I am having: scrollpanels (boxes) that I want to flow horizontally, like text. But no luck, they just stuck one under the other.

  4. dobes says:

    If you mark all the scroll-panels with css attribute “float:left” you’ll get something like what you want. You’ll probably want to wrap each row in another div with css attributes “float:left;clear:right” so that you don’t get stuff from later in the document being placed to the right of your row.

    Disclaimer: I’m more of a CSS+XHTML layout n00b than a pro … googling might give a much better solution.

  5. dobes says:

    Ah apparently you solved this and posted the solution in your own blog … http://vitaly.ediew.com/?p=14

    display:inline is good, too!

  6. Uncle Ben says:

    It Works…Thanks!

  7. Both vertical and horizontal panel can just flow panel instead… see http://blog.sudhirj.com/2009/05/vertical-and-horizontal-flow-panels-in.html

%d bloggers like this: