0

I want to add widgets to the flowpanel but in vertical manner. I have given display:block css to flowpanel and for the child widgets display:inline:block. They are placed vertically but in a single column. I want a vertical flow like horizontal flow(First it fullfils first row till flowpanel width reaches and move to next row). I want place widgets until height of the flowpanel reaches and when it gets reached I want to place the widgets to first row next column. Can somebody help me to get out of this.

pbhle
  • 2,856
  • 13
  • 33
  • 40

1 Answers1

0

You can do it in two ways.

You can do all the calculations in the code, i.e. measure the parent container, add children until the height is exceed, etc. This is not an optimal solution, but it works in older browsers too.

A better solution is to use a Flexbox layout model, which is supported by all modern browsers. Set a parent to:

display: flex;
flex-direction: column;
flex-wrap: wrap;

and then add your children. Keep children as display:block. You can even add some rules to tell the browser what to do with the empty space in a column.

Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58
  • This is an expected behavior if there is enough space, isn't it? Items will wrap into the second column if (a) there is not enough space in the first column, and (b) there is enough space for a second column. – Andrei Volgin Mar 24 '15 at 15:22
  • I am using firefox version 26.0 with gwt 2.6. and flex css is not supported by it. Is there any other way for it :( – pbhle Apr 22 '15 at 07:45
  • Then you have to use the old-fashioned JS solution. Or upgrade your Firefox. – Andrei Volgin Apr 22 '15 at 19:02
  • actually i dont want firefox version after 26.0 which is the other JS solution. Can u please help me . – pbhle Apr 23 '15 at 05:45
  • It depends on your layout. Assuming that a parent has a height before you add the children, for example if it implements RequiresResize and gets its height from its own parent, you can simply add children one by one calculating their total height and moving to the next column when there is no room left. – Andrei Volgin Apr 23 '15 at 13:56