Unhide div causes scroll issue

Hello guys,

I’m currently learning Iconic as well as AngularJS while I’m currently developing a mobile application for iOS and Android, so far I’ve resisted seeking help and generally find my solution after searching… Unfortunately I can’t quite find a similar issue like this on here or StackOverflow, or anywhere else for that matter. Essentially this is my issue…

<div class="list card">
<div class="item item-divider" ng-click="showUnsentOrders()"><i class="icon {{ unsentOrdersIcon }}"></i> Unsent Orders</div>
	<div class="row">
		<div class="col-33"><p class="" style="text-align: center; font-weight: bold;">Orders</p></div>
		<div class="col-33"><p class="" style="text-align: center; font-weight: bold;">Cases</p></div>
		<div class="col-33"><p class="" style="text-align: center; font-weight: bold;">Cost</p></div>
	</div>
	<div class="row">
		<div class="col-33"><p class="" style="text-align: center;">{{ unsent_supplier_count }}</p></div>
		<div class="col-33"><p class="" style="text-align: center;">{{ unsent_case_count }}</p></div>
		<div class="col-33"><p class="" style="text-align: center;">{{ unsent_value_count }}</p></div>
	</div>
	<div class="systemHiddenSlide" ng-class="{'active':unsentOrdersDiv}" ng-repeat="(key, value) in orderInformation.unsent_orders | groupBy: 'supplier'">
		<div class="item-divider">
			<div class="col" style="text-align: center; font-weight: bold;">Supplier: {{ key }}</div>
		</div>
		<div class="row">
			<div class="col-33"><p class="" style="text-align: center; font-weight: bold;">Order ID</p></div>
			<div class="col-33"><p class="" style="text-align: center; font-weight: bold;">Cases</p></div>
			<div class="col-33"><p class="" style="text-align: center; font-weight: bold;">Cost</p></div>
		</div>
		<div class="row" ng-repeat="details in value">
			<div class="col-33"><p class="" style="text-align: center;">{{ details.order_no }}</p></div>
			<div class="col-33"><p class="" style="text-align: center;">{{ details.cases }}</p></div>
			<div class="col-33"><p class="" style="text-align: center;">{{ details.value }}</p></div>
		</div>
	</div>
	</div>

So as shown in the code, I have a simple ion-card which will by default have a basic header which has been assigned an ng-click, a basic summary is also shown in the content of the card, including a hidden div named ‘systemHiddenSlide’. Now, upon clicking any part of the header it will unhide the hidden div ‘systemHiddenSlide’. Which is where the issue occurs which could be related to the ng-repeat (not quite sure).

The ng-repeat will loop through the JSON feed and section it off grouped by supplier (using angular.filter), as it currently stands I’m using a small amount of data roughly 5 rows of information to display which is enough to go off the screen; requiring a scroll. Now once the data has been expanded in the hidden DIV it takes roughly 5 seconds (initially) to recognise data is off the screen, to then allow scrolling. Of course you could hide the DIV again, then expand but after the first load of the scroll begins to work fine.

I’m not quite sure what is causing this, or how to resolve this issue so I’m hoping someone can understand my dilemma and have a solution. I haven’t specially stated anywhere in my code for scrolling, so I don’t know if there’s anything I need to state to ensure this performance issue it resolved or not.

Hi @MattVon,

If I understand your problem I think what you need to do is add a delegate handle to your parent ion-content, e.g.

<ion-content delegate-handle="mainScroll">

And then after hiding/showing a div call:

$ionicScrollDelegate.$getByHandle('mainScroll').resize();

That should recalculate the size of the parent container and correct the scroll position.

Thanks for you quick response @tomwasd! Unfortunately, this hasn’t really changed anything, of course at least I have an idea now, where as before I didn’t. I’ve added the delegate to the content tag, and the $ionicScrollDeletegate at the end of the function which decides when to show/hide the div. I did a quick test and tried added a .scollBottom() after the resize, and nothing happened at all. The only time it changed is when I closed the div after the few seconds it takes to notice the scroll state.