Disable scroll in List

I am using a List to display some content in a pane. I have some other content following the List. Is there a way to disable the scroll which is incorporated in the list by default. I am using this app on a mobile device so when I try to scroll down, I have to scroll outside the list area to scroll to the bottom. So I was to disable the list scroll so that it scrolls to the bottom content even if I touch on the list area.

Comments

  • you could set the height of list to 100% or maybe just use a repeater instead (depending on how many elements you have and performance considerations). i think the point of the list is that a scroller is implemented so items are only generated as needed.
  • So I can't use a repeater as I am using a reorderable list. Scroll would be ok but the only issue I am facing is I am unable to scroll the whole panel. I have to scroll outside the list area to do that on tablet. Any advice there?
  • You can disable scrolling in a enyo.List by setting both vertical and horizontal to "hidden".
  • edited November 2013
    It still doesn't work. On a device, I have to scroll outside the list area to scroll the entire content of the page
    
    {
                kind: "List",
                classes: "list-sample-language-list",
                style: "margin-bottom: 10px;",
                vertical: "hidden",
                horizontal: "hidden",
                multiSelect: false,
                reorderable: true,
                centerReorderContainer: false,
                enableSwipe: true,
                onSetupItem: "setupItem",
                onReorder: "listReorder",
                onSetupReorderComponents: "setupReorderComponents",
                onSetupSwipeItem: "setupSwipeItem",
                onSwipeComplete: "swipeComplete",
                components: [
                    {name: "item", kind: "FittableColumns", classes: "list-sample-language-item", components: [
                        {name: "text", classes: "itemLabel",fit: true},
                        {name: "viewState", content: ""}
                    ]}
                ],
                reorderComponents: [
                    {name: "reorderContent", classes: "enyo-fit reorderDragger", components: [
                        {name: "reorderTitle", tag: "h2", allowHtml: true}
                    ]}
                ],
                swipeableComponents: [
                    {name: "swipeItem", classes: "enyo-fit", components: [
                        {name: "swipeTitle", classes: "swipeTitle"}
                    ]}
                ]
            },
    
    Anything wrong in here?
  • ah... what you want is code that reads the size of the scroller content area and sets the scroller's height to match that. That's not something automatically built into the Enyo code and it might be hard to do, as the List follows a flyweight pattern where content areas aren't rendered until you scroll to the part that shows it. If there's no actual list scrolling, then we'd have to render everything at once.
  • I am not too good at this but can you tell how can I set the height of the scroller. I mean how can I access the element. I tried this this.$.list.applyStyle("height","515px"); but this gives height to the list not scroller, I assume.
  • enyo.List's superkind is an enyo.Scroller. So, it should work to apply the style as you have it.
Sign In or Register to comment.