1

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"}

phwd
  • 19,975
  • 5
  • 50
  • 78
ryan_m
  • 721
  • 2
  • 7
  • 18
  • Try adding `flex: 1` to all the elements on that same line, and making sure they live in some kind of horizontally aligned layout, e.g. a `HFlexLayout` – Frost Jan 05 '12 at 01:00
  • flex should be the best way, and is initially, but if i have flex: 2 for my main button and flex: 1 for my toggle fields, every time i toggle the color, the main button get's bigger and starts pushing everything else off of the screen to the right. So, for now i'm specifying the width. This way doesn't reorient as nicely from portrait to landscape, but all of the fields stay on the screen at least. – ryan_m Jan 06 '12 at 09:50

2 Answers2

2

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.

Pre101
  • 2,370
  • 16
  • 23
0

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.

Chris
  • 366
  • 2
  • 10