Panels with variable heights inside Scroller

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

Comments

  • 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.
  • 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
    		});
    	}
    });
  • @theryanjduffy‌ thank you for your answer
Sign In or Register to comment.