How to show records side by side in a list Record widget


I am trying to show the ListRecords in this way (side by side but fill vertically first).

Record1      Record4

Record2      Record5

Record3      Record6

There is one article which explains this scenario but it just talks about showing side by side but not filling vertically first.

Appreciate any help on this.



Hi Ravi.

You don't have that behavior by default.

I would say you'll need some CSS and logic to implement that behavior.

That also a look at SilkUI where you can get some ideas on the widget Gallery.



You can do it with flex. But to work, you will be required to fix at least the "height", but probably also the width of your "gallery".

You need a small css class like the one below:

width: 400px;
height: 400px;
display: -webkit-inline-flex;
display: inline-flex;
flex-flow: column wrap;

Than, remove the "ListRecords" class of your ListRecords widget, replacing it with this VerticalFirstGallery class

It will work, but you will have to test and improve it.
And I don't guarantee the results.
Probably, the best would not do this...

Eduardo Jauch


Thank you Eduardo. This code works. I just have to manipulate the height attribute to fit the display for various tenants data.