Panels with variable heights inside Scroller

peacemoon

I use enyo 2.5, so the topic should be here

I have a carousel inside a scroller: Something like this

enyo.kind({
    name: "Main",
    kind: "FittableRows",
    classes: "enyo-fill",
    components:[
        { kind: "Scroller", touch: true, fit: true, horizontal: "hidden", components:[
            { kind: "Header", name: "Header" },
            { kind: "Carousel", name: "Carousel" },
        ]},
        { kind: "FixedFooter", name: "Footer"},
    ],
})

The panels inside carousel have different height and i don't want to set a fix height for all panels. When i run the app, all panels are rendered with height = 0 and not the "natural" height.

Is it possible to put a carousel of panels with variable heights inside a scroller?

Thank you

wangii

it seems to me all panels are positioned and aligned by css attributes when you are using "CarouselArranger". I way I eventually used is to add a wrapper like this:
enyo.kind({ name:'ContentPanel', components:[ {classes:'wrapper', components:[ ... panels' real components ]} ] });
you can then css style your wrapper the way you like.

theryanjduffy

Unfortunately, CarouselArranger is designed to use absolutely-positioned panels so the container (enyo.Panels) doesn't have a natural height. You could adjust the height of the enyo.Panels when a new panel is selected and that should work fine inside a scroller. You could then animate the height change if you were so inclined.

enyo.kind({
	name: 'ex.App',
	components: [
		{kind: 'Panels', style: 'border: 1px solid black;', arrangerKind: 'CarouselArranger', onTransitionFinish: 'finished', components: [
			{content: '300', style: 'width: 100%; height: 300px'},
			{content: '450', style: 'width: 100%; height: 450px'},
			{content: '150', style: 'width: 100%; height: 150px'},
			{content: '200', style: 'width: 100%; height: 200px'},
			{content: '500', style: 'width: 100%; height: 500px'},
		]},

	],

	rendered: enyo.inherit(function (sup) {
		return function () {
			sup.apply(this, arguments);
			this.resizePanels();
		}
	}),

	finished: function (sender, event) {
		this.resizePanels();
	},

	resizePanels: function () {
		var bounds = this.$.panels.getActive().getBounds();
		this.$.panels.setBounds({
			height: bounds.height
		});
	}
});

peacemoon

@theryanjduffy‌ thank you for your answer