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.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!