Layouting ListWidget

  
Good day everyone,

I would like to ask how could I achieve the following ListWidget layout. I have done a whole straight list. Here's what I've done and on the next picture is what I want to achieve.

Picture 1



Picture 2 (Picture edited using a photo editor. This is what I want to achieve.)



Note that the list is data-driven.

Thanks :)

Ju-chan
make advantage of expressions so you inject for example div's to divide it into 2 columns

Hi Ju-Chan,

If I understood correctly you're using the List Records widget.
To have that layout, the simpliest way is actually to use the CSS, something like:
.Option{
     display: inline-block;
    width: 120px;
}

Additionally you would have to set the Line Separator on the List Records widget to "none".
Let me know if you need further assistance.

@Statler & Waldorf: That is definitely a solution to avoid! :P

Cheers,

RG
I've tried the CSS you have provided Mr. Ruben, but I forgot to mention that the list widget is layouted using tables and it resulted to a lesser spaced straight list. :)
@ruben i like to avoid anything, but listrecords plainly sucks for advanced stuff.

@Ju-chan, were you able to get it to work?

@Statler & Waldorf: to be honest I rather use list record over table record. Can you give an example of something that you had a hard time getting done with list records? (just so that I every stumble upon something similar, I have a heads up on that!)

@Ruben: Unfortunately, no.. but then, I've realized, I am referring to a common list of applications, and not a wholly list of applications, though it's much better to have that. Also, that part of the application occupies a smaller part, so it would not be a bother though.

I'll do more experimentation, and if I have done it, I'll try to share it here.