EnyoJS TopBottom Arranger

Question

I am working on an enyo application where on a page I have a topBottom Arranger which should change to the next panel on swipe down.

The problem i am facing is , the panels are not taking the complete screen height and when i am on a particular panel I am able to see some segment of the previous panels. I want to get rid of this and have just one panel occupying the whole screen.

Here is a fiddle example. http://jsfiddle.net/XhZvE/

(make sure to change the arrangerType to "topBottomArranger" in the dropdown at left top corner)

Code goes like this

enyo.kind({
    name: "enyo.sample.MyGridArranger",
    kind: "GridArranger",
    colHeight: "150",
    colWidth: "150"
});

enyo.kind({
    name: "enyo.sample.PanelsSample",
    kind: "FittableRows",
    classes: "enyo-fit",
    components: [
        {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [
            {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [
                {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
                    {kind: "onyx.MenuDecorator", components: [
                        {content:"Arranger"},
                        {name:"arrangerPicker", kind: "onyx.Menu", maxHeight: 360, floating: true, onSelect:"arrangerSelected"}
                    ]},
                    {kind: "onyx.Button", content: "Previous", ontap: "prevPanel"},
                    {kind: "onyx.Button", content: "Next", ontap: "nextPanel"},
                    {kind: "onyx.InputDecorator", style: "width: 60px;", components: [
                        {kind: "onyx.Input", value: 0, onchange: "gotoPanel"}
                    ]},
                    {kind: "onyx.Button", content: "Go", ontap: "gotoPanel"},
                    {kind: "onyx.Button", content: "Add", ontap: "addPanel"},
                    {kind: "onyx.Button", content: "Delete", ontap: "deletePanel"}
                ]}
            ]}
        ]},
        {kind: "Panels", name:"samplePanels", fit:true, realtimeFit: true, classes: "panels-sample-panels enyo-border-box", components: [
            {content:0, style:"background:red;"},
            {content:1, style:"background:orange;"},
            {content:2, style:"background:yellow;"},
            {content:3, style:"background:green;"},
            {content:4, style:"background:blue;"},
            {content:5, style:"background:indigo;"},
            {content:6, style:"background:violet;"}
        ]}
    ],
    panelArrangers: [
        {name: "CardArranger", arrangerKind: "CardArranger"},
        {name: "CardSlideInArranger", arrangerKind: "CardSlideInArranger"},
        {name: "CarouselArranger", arrangerKind: "CarouselArranger", classes: "panels-sample-wide"},
        {name: "CollapsingArranger", arrangerKind: "CollapsingArranger", classes: "panels-sample-collapsible"},
        {name: "LeftRightArranger", arrangerKind: "LeftRightArranger"},
        {name: "TopBottomArranger", arrangerKind: "TopBottomArranger", classes: "panels-sample-topbottom"},
        {name: "SpiralArranger", arrangerKind: "SpiralArranger", classes: "panels-sample-spiral"},
        {name: "GridArranger", arrangerKind: "enyo.sample.MyGridArranger", classes: "panels-sample-grid"},
        {name: "DockRightArranger", arrangerKind: "DockRightArranger", classes: "panels-sample-collapsible"}
    ],
    bgcolors: ["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    create: function() {
        this.inherited(arguments);
        for (var i=0; i<this.panelArrangers.length; i++) {
            this.$.arrangerPicker.createComponent({content:this.panelArrangers[i].name});
        }
        this.panelCount=this.$.samplePanels.getPanels().length;
    },
    rendered: function() {
        this.inherited(arguments);
    },
    arrangerSelected: function(inSender, inEvent) {
        var sp = this.$.samplePanels;
        var p = this.panelArrangers[inEvent.originator.indexInContainer()-1];
        if (this.currentClass) {
            sp.removeClass(this.currentClass);
        }
        if (p.classes) {
            sp.addClass(p.classes);
            this.currentClass = p.classes;
        }
        sp.setArrangerKind(p.arrangerKind);
        if (enyo.Panels.isScreenNarrow()) {
            this.setIndex(1);
        }
    },
    // panels
    prevPanel: function() {
        this.$.samplePanels.previous();
        this.$.input.setValue(this.$.samplePanels.index);
    },
    nextPanel: function() {
        this.$.samplePanels.next();
        this.$.input.setValue(this.$.samplePanels.index);
    },
    gotoPanel: function() {
        this.$.samplePanels.setIndex(this.$.input.getValue());
    },
    panelCount: 0,
    addPanel: function() {
        var sp = this.$.samplePanels;
        var i = this.panelCount++;
        var p = sp.createComponent({
            style:"background:" + this.bgcolors[i % this.bgcolors.length],
            content:i
        });
        p.render();
        sp.reflow();
        sp.setIndex(i);
    },
    deletePanel: function() {
        var p = this.$.samplePanels.getActive();
        if (p) {
            p.destroy();
        }
    }
});

TIA

Answer 1

The margin property of TopBottomArranger needs to be set to 0 instead of the default 40 it is inheriting from LeftRightArranger. I added a custom arranger that implements this to the end of the Arranger list in the fiddle: http://jsfiddle.net/aarontam/XhZvE/1/