1

I have made a simple enyo app to teat scrolling. It scrolls vertically, but not horizontal. Allso the documentation says you must set the scroll size. The example code usses flex: 1 for the size, could somebody explain how this works.

code enyo.kind({ name: "MyApps.MainApp", kind: enyo.VFlexBox, components: [ {kind: "PageHeader", content: "Scroll"}, {name:"curValue", content:("Sample Text")}, {kind: "Button", caption: "Action", onclick: "btnClickA"},

   {kind: "Scroller", flex: 1, onScrollStart: "btnClick", components: [
   { content:("Sample Text1")},
   { content:("Sample Text2")}

]}

], btnClick: function() { this.$.curValue.setContent("Start Scroll"); // handle the button click },

btnClickA: function() {
this.$.curValue.setContent("Button click");  // handle the button click

} });

Ted pottel
  • 6,869
  • 21
  • 75
  • 134

1 Answers1

2

The 'flex' value refers to the proportion of the parent FlexBox that the specified child takes up. You should read up on FlexBoxes to get a little better idea. In the absence of other controls flex: 1 indicates the control should take up all of the parent's space. If two controls were in the FlexBox and both were flex: 1 then they would equally share the parent's space. If one was flex: 2 then it would take up twice (2x1) the space as the flex: 1 control. In other words, the flex value sets the relative proportion of the parent (less any non-flexed controls) that a child takes up.

What I believe you are missing is that you must put something inside the scroller that's wider than the width of the scroller, otherwise... there's nothing to scroll! Hope that helps.

Pre101
  • 2,370
  • 16
  • 23