321
Views
11
Comments
Displaying records from a list side-by-side
Question
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?
2018-05-16 11-16-36
João Heleno
 
MVP
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.
https://www.outsystems.com/forge/component/573/ecommerce/
2016-04-21 20-09-55
J.
 
MVP
Yup,

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

check out this:
https://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
https://jsfiddle.net/hmwe3mm1/

ul{
    width:410px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:10px;
    width:100px;
}
2016-04-21 18-13-58
Nuno Rolo
 
MVP
Hi Gerry,

Could this component do the trick?
2012-08-01 17-33-40
Gerry
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?
 

2016-04-21 18-13-58
Nuno Rolo
 
MVP
Have you tried to change the Line Count propertie in the TableRecord? Don't forget that your lines will be columns.
2012-08-01 17-33-40
Gerry

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.
2016-04-21 18-13-58
Nuno Rolo
 
MVP
You need to put navigation in the table.
Check here the example made by André.
2012-08-01 17-33-40
Gerry
I can't because I will need to output this page to a file.
2016-04-21 18-13-58
Nuno Rolo
 
MVP
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.
2017-10-09 20-45-22
André Siébra
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! :)
2012-08-01 17-33-40
Gerry

Many thanks. That works well.
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.