scrollable Groupbox content overlaps with the GroupboxHeader

edited May 2013 in Newbie Questions
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:

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 ?


  • 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:
  • edited May 2013
    @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 ?
Sign In or Register to comment.