Table data next-to-eachother (horizontal)

Table data next-to-eachother (horizontal)

  
Hi,

If you work with the Table Records widget then the data is placed row by row (vertically).
I have now a situation where I need to place the data next to each other (horizontal).
With the standard widgets this is not possible.
Anyone an idea to solve this problem?

Regards,
Hans
Hi there Hans,

Would it be sufficient for you to use a List Records instead of a Table records?

You can choose not to have a line separator, in which case it would work horizontally as you asked.

Hope it helps,
Gonçalo
Hi,

I tried a List Record approach but that didn't work.
The problem is that you attach a Query to a ListRecord and you can't show for instance 4 entity records on the same time.
What I want is to show:
1 - 2 - 3 - 4
5 - 6 - 7 - 8

If you use the List Record you will end up with:
1 - 1 - 1 - 1
2 - 2 - 2 - 2

regards,
Hans
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 http://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