Displaying records from a list side-by-side

Displaying records from a list side-by-side

  
I need to display records in columns side-by-side on the screen.
For example:
Address1          | Address 2        | Address 3       | Address 4
City, State Zip   | City, State Zip | City, State Zip | City, State Zip

Address 5        | Address 6
City, State Zip | City, State Zip

Does anyone know how to do that?
I would use a ListRecords with a container and some css to float left.

Imagine you have a parent container 300px wide... inside you have your ListRecords outputing another container 100px wide. With float left you first fill one row with 3 records and the remaining ones will fill new rows and so on.

Edit: I think this principle was used in the ecommerce app to list products.
http://www.outsystems.com/forge/component/573/ecommerce/
Yup,

css3 has some new fun stuff, but I think it will not be good for your case

check out this:
http://jsfiddle.net/00xxqpdj/
ul {
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
    list-style: none;
    margin:0;
    padding:0;
}
ul > li {
    display: inline-block;
    width: 100%;
}

li {
    margin: 10px;
 background-color: green;
    height: 100px;
    width:100px;
}
otherwise, a more old-school way
http://jsfiddle.net/hmwe3mm1/

ul{
    width:410px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:10px;
    width:100px;
}
Hi Gerry,

Could this component do the trick?
Nuno Rolo wrote:
Hi Gerry,

Could this component do the trick?
It kind of does, but it blasts across the page without going to the next line. Does anyone know how to correct this?
 

Have you tried to change the Line Count propertie in the TableRecord? Don't forget that your lines will be columns.

If I do, say set it to 4, and there are more than 4, it'll stop at 4 and not continue on the next line.
You need to put navigation in the table.
Check here the example made by André.
I can't because I will need to output this page to a file.
Oh, you didn't mention that detail.
Well in that case you can use ListRecords and CSS tricks like was said before.
Or you can make something like split your list in several lists and use multiple table records or even encapsulate that lists in a major list that will be shown in a normal Table Record with the transposables inside.
Didn't try the idea and i don't know if i explained well, but hope that helps.
I would use a ListRecords with a container inside too, but I just set the "Line Separator" property of List Records to "None" and add the follow css to the container: "margin-right: 5px; display: inline-block;". Its very simple and always worked for me.

To avoid it  it flows across the page without going to the next line, just set a "max-width" to an external container of the List Record. The itens will be limitaded by that width and will continue on the next line.

Hope it helps! :)

Many thanks. That works well.