CarouselArranger and fit property

edited September 2012 in Newbie Questions
Hello, I'm new to Enyo and I find it pretty great, but I'm still discovering it so I'd need your help guys.

I'm using a CarouselArranger with a panels having 2 components. The first (left) panel is a div where you put search filters into input fields. The second panel (on the right) is where the results are displayed. For now, I'm just testing the interface so the search isn't coded yet and I'm just displaying some divs with an image and a text for each. Here's my code:

enyo.kind({
    name: "CointreauSearchApp",
    kind: "FittableRows",
    classes: "onyx",
    components: [
        ... ,
            ..
            //Search and display panel
            { kind: "Panels", name: "searchAndDisplayPanel", arrangerKind: "CarouselArranger", components: [
                {tag: "div", name: "searchPanel", style:"background-color: black;", components: [
                    ... //Div where search filters inputs are
                ]},
            {kind: "enyo.Scroller", /*fit: true,*/components: [
                {tag: "div", name: "productList"} // Where search results are displayed, search results are of a custom kind. it's a box with an image and a text
                ]}
            ]},
            ...
        ]}
    ],
    ...
});
And here's what troubles me:

If I don't set the fit property of the scroller to true, I'll be able to hide the search panel by sliding to the left, and to show it by sliding to the right. The problem is that when the search panel is displayed, the result items aren't re-organized to fit the space they are given, some results boxes will be partially out of sight.

Screenshot with no fit property and search bar displayed:
Image and video hosting by TinyPic

Screenshot with no fit property and search bar hidden:
Image and video hosting by TinyPic

If I set the fit property of the scroller to true, the result boxes will be correctly displayed but I won't be able to hide the search panel by sliding...

Screenshot with fit property set to true:
Image and video hosting by TinyPic

PS: Don't mind the change of icon on the left panel, I just changed it between my screenshots

Comments

  • I think you want to use CollapsingArranger versus CarouselArranger. Carousel allows the content to extend beyond the view whereas Collapsing will fill the available space. Here's your example converted to collapsing.

    http://jsfiddle.net/gnYg7/
  • Well it almost works, the thing is when I try to hide the search panel (the left one), it's opacity isn't automatically set to 0. See for yourself:
    Image and video hosting by TinyPic

    This is fixed if I set a background-color for my right panel, but I think it should be handled without doing anything, shouldn't it?
  • ya, you have to have an opaque background for the covering panel. You could set the opacity of the left panel but it'd be tough to get the timing right.
  • I'll just use an opaque background, thanks
Sign In or Register to comment.