How do I specify button size in webos-enyo?

Question

Inside of a scroller, I want a vertical list of buttons (e.g., x,y,z) with 5 fields after each button. When a button is pressed, I want one of the fields to toggle from off to on.

{X}[0][0][0][0][0]

{Y}[1][0][0][0][0]

{Z}[1][1][1][1][0]

How do I set the size of the buttons (X,Y,Z) so I can have multiple elements on the same line?

Current button code, taken from enyo tutorial:

{kind: "Button", caption: "X", onclick: "buttonClick", className: "enyo-button-dark"}

Answer 1

Martin's answer is correct. Arrange everything inside an HFlexBox and use Flex. That is, if you want the width of the button to grow with the width of the container. Alternately, you can apply a style to the button using CSS. e.g.:

{kind: "Button", style: "width: 250px; height: 60px;", ...

or add a class to the button and apply styling that way.

Answer 2

To keep the buttons a fixed size, but allow the other elements to fill the remaining space, set the width of the button explicitly, and the width of the other elements with flex values.

{kind: enyo.HFlexBox, components:[
    {kind: enyo.Button, style: "width:96px"},
    {content:"Field 1", flex:1},
    {content:"Field 2", flex:1},
    {content:"Field 3", flex:1},
    {content:"Field 4", flex:1},
    {content:"Field 5", flex:1},
]},

In this way, the buttons won't ever resize, but the other columns will always evenly fill the remaining space.