Accordian list modification: keep all top level items in view?


#1

Hi, this is my first time posting, so let me know if I need to add/clarify something.

I have been working on replicating some behavior from an android/ios app that I am adapting to Ionic but have been unsuccessful so far. What I want is something similar to the behavior seen in the menu here:

http://codepen.io/leesei/pen/ocxnD

except that I want to stop the top level items (Products, Offers, etc…) from moving off the bottom of the screen, and instead have the lower level items (Products0, Products1, etc…) scroll inside whatever space is not taken up the top level items.

Furthermore, the lists are dynamically generated from a back-end request so I don’t know exactly how many items there will be ahead of time, only that there is a limit of around 5 on the number of top level items.

So far my approach has been to use an ion-list inside an ion-scroll inside an ng-repeat but this only seems to work if I know how big the ion-scrolls are ahead of time, which is not easy to determine given the dynamic nature of the lists.

Any help/ideas would be much appreciated.

Thanks,
Alex