Hey guys,
So I’ve been attempting different approaches with this will no succession, from using $ionicPlatform to angular.element (both presenting null values or errors) just to simply prevent any content from going off the screen. I’ll provide screenshots of what I have vs what I’d prefer to hopefully clear any confusion up. I have an ‘ionic-slide-box’ which contains several slides which are relatively all identical. Within each slide is a card, and several parts as ordered:
- Graph
- Table Header
- ion-scroll
Currently what happens (if I don’t set a specific height), my ion-scroll will go off the screen which I would prefer not to happen, as it means the user must scroll backup to see the updated graph based on the list item they have tapped. Ideally it’d be nicer if the ion-scroll could stop before the pager of the ion-slide-box thus allowing the user to scroll the list without anything going off screen. The part that has been most troublesome for me though, is detecting the screen size and dynamically adjusting the height of the ion-scroll based on screen size, is there an approach that could achieve this?
Current view: Pager overlaps ion-scroll, AND ion-scroll has no specific height to prevent it from going off screen.
Preferred view: Pager sits at the bottom of the screen (without going off screen), the ion-scroll has a dynamic height based on where it starts and finishes before the pager starts. Thus containing everything in the screen view and the only scrollable content is the ion-scroll.
Any questions, please ask. I appreciate any an all help provided.