How to wrap content from a ListRecord

How to wrap content from a ListRecord

  

Hi,


I am trying to display specific states that my company has service locations at. I am using a ListRecord with a Container and a link inside that as seen here:

I know how to display the states side by side. I can accomplish this by making my ListRecord Line Separator None and make States Container 4 columns. This displays tree Links side by side:

However, I want to know how to display the tables in increasing order down the page. After say 10 states down it wraps the remaining state to the next "column" on the right and continues until 10 states is reached then wraps right again and so on. I can do this using ListRecords Line Separator as "New Line" and the CSS columns attribute on my AgenciesReturnedContainer like this:

SyntaxEditor Code Snippet

.agenciesReturnedContainer {
    columns: 300px 3;
}

This is the result:

I would like to know if there is any way to accomplish this same result without using the CSS columns? CSS columns is not supported by all older browsers so if I can achieve the same result without the css columns attribute, I'd be very happy.

Thanks in advance for any support.


Tim

Hello Tim,

I would use FLEX instead. It is better supported and less bugg on most browsers.
https://www.outsystems.com/forums/discussion/26793/how-to-show-records-side-by-side-in-a-list-record-widget/

But thruth is, there is no way to do this to work with really old browsers, at least easily.

Cheers.

Eduardo Jauch wrote:

Hello Tim,

I would use FLEX instead. It is better supported and less bugg on most browsers.
https://www.outsystems.com/forums/discussion/26793/how-to-show-records-side-by-side-in-a-list-record-widget/

But thruth is, there is no way to do this to work with really old browsers, at least easily.

Cheers.

Thank you so much for getting back with me so quickly Eduardo. I do like this solution and it is very clean! However, flex-flow is supported only by newer browsers, according to MDN:

I need something supported by a browser older than IE 11. Fortunately, the CSS columns are supported in IE 10, the only problem is some of our platform users are using IE 9. I am thinking if there is a solution that works on all browsers, but the answer is probably not.


Thanks again.


I used this comparer:
https://caniuse.com/#search=column

and

https://caniuse.com/#search=Flex

There is no easy way to do this in older browsers.
Unfortunately, even if clients would like to make a web application to work on anything, truth is that this is not possible.

And in the end, with IE, that is more than dead and buried (but some companies still use it), it is even worse.

Microsoft should never tried so hard to make something so horrible as IE :D