Trying to make 3 columns of data with equal spacing in Enyo

Question

I have a project I'm working on for enyo, that needs to have 3 column with the following format:

--- date---      ---- message -------      ----- attachments-------

The problem is that each line has a different spacing. So if the first date is 1/2/10012 and the next date is 12/22/2002, the message column will not line up. I've looked into using a slidingPane, but was wondering if there was a more simple way to do it.

score 3 · Accepted Answer · answered Jan 10 '12 at 19:31

3

I'm not sure if I understand the question fully, but if you want a block of display to contain 3 equally spaced "columns" you can do something like:

{kind: enyo.VFlexBox, components: [
    {kind: enyo.HFlexBox, flex: 1, align: "center", pack: "center", components: [
        {name: "column1", flex: 1, content: "Column 1"},
        {name: "column2", flex: 1, content: "Column 2"},
        {name: "column3", flex: 1, content: "Column 3"},
    ]}
]}

answered Jan 10 '12 at 19:31

Webby Vanderhack

889
7
13

You might want to remove the flex value from the HFlexBox, or else all of the rows will be evenly spaced as well. – Chris May 08 '12 at 16:15

score 0 · Answer 2 · answered Jan 10 '12 at 22:04

I believe that what you want is the VirtualRepeater. This allows for a repeating list of rows (It say maximum of ~100 rows, so make sure that'll work for your use case). This should allow for variable height rows (Which is what I Think you're talking about). In your getItem function you can fill in each row as needed and they'll line up.

Trying to make 3 columns of data with equal spacing in Enyo

2 Answers2