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

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

  

Hi

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.

https://success.outsystems.com/Documentation/Development_FAQs/How_to_show_records_side_by_side_in_a_List_Record_widget#Answer

Appreciate any help on this.

Thanks

Ravi


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.

Solution

Hi,

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:

.VerticalFirstGallery
{
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...

Cheers,
Eduardo Jauch

Solution

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