Hans,

I'm sorry, but I didn't quite understand your answer.

If you set the line separator property to None, you'll get the second alternative. What you need in addition is to force a line break on some condition (Maybe Mod(), testing zero remainder?)

Maybe what I'm missing here is the kind of query you're doing. Could you post a small example or be more specific on that?

Best regards,
Gonçalo

Gonçalo,

What I mean here is very easy to try, keep in mind we're talking records here and not record-fields:

Have a simple query (say users).
Have a webpage with a ListRecord component and attach it to the query.
Set ListRecord property LineSeparater to None

When you run this, you get:
UserRecord 1,
UserRecord 2,
UserRecord 3,
Etc.

You will get the records vertically, under each other.
1
2
3

You can of course place your *fields* horizontally or vertically.

But, as far as I know, there is no easy way to place the *records* horizontally.
Thus instead of vertical:
1
2
3

Horizontal: 1 2 3

I hope that this is a little bit more clear.

An example of what I want to create can be seen with Google; the search on images.
When you think of the images as records you will understand my question :)

Kind regards,

Hans

Hi Hans,

Can you validate that the attached sample does what you're looking for? It has a Google Image behavior implemented as I described.

Sorry for insisting but what you described is exactly what I was talking about. The thing was that you can't show records per-se, you always need to show a given record field right?

Anyway, get back to me if this doesn't cut it - I've tryied it and obtained the behavior you described.

Best regards,
Gonçalo

Hi Gonçalo,

Yes, this is the behavior I was looking for!
Strange thing is that I had used the RecList component and got another result.
I'll investigate it and make the proper adjustments :)

Thanx for the help!

Regards,
Hans

Hello Hans,

First of all I'm assuming that you're using OutSystems Platform 4.0 or higher and what you mean by User Record is a table with expressions filled in by a query to the database (since it's not possible to put a show record widget inside a list record widget).

The reason why your user records aren't displayed horizontally it's because tables are block level elements (you can see here more detail https://htmlhelp.com/reference/html40/block.html) and "... When rendered visually, block-level elements usually begin on a new line."

The important thing in this phrase is the "usually" part. Using CSS you can take a block level element and make it behave like an inline level element. Basically this is done using the float attribute. I've attached an OML file with an example. What you'll you have to do is extend this concept to the one you mentioned and that Gonçalo also spoke which is determining the break point in your horizontal layout (either using Mod() or something similar)

I hope this was helpful
Cheers,
André

Hello André,

Thanks for the addition!
Yes this is also what I was looking for; I need to show several record-fields and this is a nice way to do it.

Regards,

Hans

Hello,

I choose for the "float solution" (the other one doesn't work for me) and it works well.
The only strange thing that I have is that the height is not always the same.
I use an image with some text and have placed it in a table.
The float style is added to the table.
I tried to set the height with the table and also with the style. But both are not working.

What should i do?

regards,
Hans

Hi Hans,

Could you post a screen shot of what you mean?

André

Hi Andre,

I attached a partial screenshot. What you see here is an article image list with the use of the ListRecord component and a table with the "Float" style.
You see that the articles are not exactly next to eachother and on the second row they skip a place.
I tried to fix the heigth in the table and/or style but can't get it working in such a way that everything lines up correctly.

Regards,

Hans

Hi Hans,

What's happening is the following. You're first record is really taller then the others because it has a three line description while the others only have a two line description. This results in that the first two records displayed a long side each other have different heights. When the third record is going to be displayed, and since there's no space left to the right of the second record, this third record will be display bellow the other ones and pushed to the left because you said 'display: left;'. Now these records do not overlap and since the first record is taller then the second the third will be positioned bellow the second record (remember no space left to the right) and left to the first record. I think this is a bit confusion so I'll try to explain it with a sketch :)

Now you have:

AAA BB
AAA BB
AAA CC
CC

If A was the same size has the others you'd have:

AA BB
AA BB
CC
CC

In order for this technique to work what you'll have to do is to guarantee that all the records have the same size. My suggestion would be to cut the description n characters long adding and ellipsis at the end and having a tooltip for it. This is not sufficient because you may have records with smaller or no description at all. So the other thing you'll have to do is to set a height for the record. Probably you'll have more flexibility if you wrap the table in a container and set these properties in the container rather then the table.

I hope I could help you. Cheers,
André

Hi Hans,

Just adding to what André has written, if you don't mind having items with different heights, you could try adding something like this before each row:

<br style="clear:left;">

This would make sure next items would be pulled down, forming a new row (see case #2 on float.htm, in attach).

Paulo Ramos