Ionic view not updating height after adding img

ionic-v1
1

Im trying to add an img to the view with a button (later the camera plugin). Adding works fine, but the view height isnt updated (se gif), so I cant scroll down at first.

image
addimgionic.gif300×552 992 KB

(as you can see, the height is updated when the scrollbar disapears)

This is how I try to do it:
View:

<button ng-show="!package.data.photoUri" ng-click="vm.addPicture()">Add image</button>
<img ng-show="package.data.photoUri" ng-src="{{package.data.photoUri}}" />

Controller:

vm.addPicture = function() {
     _package.data.photoUri = 'img/ionic.png';
     $ionicScrollDelegate.resize();
 }

What can I do to make the height update faster? same thing happens on devices and browsers…

2

i have the same building, but i dont need resize the screen :S I have only add a css-class for responsive.

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

U can try to set a little timout before ur update the view.

3

Were you able to solve this with $ionicScrollDelegate.resize()?

I’m having the same issue except that my list that expands is inside a directive and so I think I need to broadcast the event to the parent scope which has access to ion-content which $ionicScrollDelegate.resize() can be called on. Tried this but despite the resize being called, my view still jumps back until a second or third try scrolling all the way down, then it finally resizes :frowning:

4

someone solve this issue?

5

i solve this with a timeout… but is amauter =(

6

I set the height of the ion-scroll to the max I expected it to be. Not a great implementation as if you have a large range, say the smallest height of all the elements is 200px but can expand to 2000px, there can be 1800px of scroll-able whitespace which isnt a great user experience but the chance of someone getting lost in white space seems less likely and the result less infuriating than trying to scroll and having the view bounce back.

7

have a way to fix it?!