scrollable Groupbox content overlaps with the GroupboxHeader

Martin

I want to create a Groupbox with GroupboxHeader and the rest of the Groupbox should display a list of items in a scroller. If the number of items are more than what the screen can display the user should be able to touch and scroll the item list from begin to end.

I have something working - but as you can see here:

http://jsfiddle.net/martinh_hp_open/SwZPW/

The top of the list overlaps with the GroupboxHeader.
But I don't want it to overlap but the scrolling area should start below the Header.
I can remove the parameter << classes: "enyo-fit" >> from my code and it works somewhat better
- but I can not scroll to the bottom of the list. As soon as I release my finger the scroller scrolls back and I can no longer see/use what is at the bottom of the list.
Any idea what I'm doing wrong or is this a bug in Enyo 2.2.0 ?

arthur

The reason is that you're using enyo-fit, as you mentioned. The cause of this is that enyo-fit uses absolute positioning to use all available space within the containing element. What it does is:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

As such, due to its top value being 0, it starts at the first pixel of your GroupBox control. One way to work around this, though I wouldn't necessarily recommend it, would be to tell that scroller to have a different top value, such as my jsFiddle example shows: http://jsfiddle.net/arthurthornton/p4cGR/

Martin

@arthur - thanks for the quick help !
perfect workaround - I use it for the time being.

BTW - I consider putting the many items in a Repeater or List (a swipeable-reorderable list) because users should be able to reorder items in the scrolled list. And users should be able to add new items at (before or after) a selected item.
What is a good Enyo kind to allow such operations? Just work with components or introduce a list kind ?