Set Ion-scroll height to 100%

1

I am using ion-scroll to use pinch and zoom on photos. The ion-zoom works beautifully for this purpose. I would like to center the ion-scroll vertically for images to start the pinch and zoom from middle of screen. The image vertically is smaller so I want this to appear symmetric in the view as it shows. Currently it appears this way and zoom only in the size of the image. Is it at all possible?

here is the code

<ion-scroll zooming="true" min-zoom="1" direction="xy" >
            <img  ng-if="photo.type === 'image'" data-src="photo.path" data-url="{{mURL}}" class="full-image mPlaceholder center" alt="" load-cached-photo  on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()"></img>
</ion-scroll>
2

For this, I’ve used this css to get it to cover everything.

.scroll-view{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
5 Likes
3

I tried it but it made the picture disappear. I tried some css changes lize z-index but still no pictures visible. Any suggestions

4

I love you, was fighting this for a good bit

1 Like
5

Finally I got what I wanted. I used simple css like so. The two classes are used with a directive that tell me if the image is portrait or landscape to use one of the two classes to center image.

.scroll{
  height:100% !important
 }
 .scrollImgOld{
  height: 100% !important;
  display:block;
  width: auto !important;
  margin-left:-50%;  
}
.scrollImgNew{
  height: 100% !important;
  display:block;
  width: auto !important;
  margin-left:0;  
}

What I got now is following. Now the image zoom using the whole view between header and footer.
Thanks to MH for pointing me in the correct direction.

2 Likes
6

I had same problem with scroll div added by ion-scroll and took another solution, maybe less !important :wink:
It was useful for me, hope for you too:

-> Added “height: inherit;” at “.scroll” definition in file ionic.css
After that I could adapt height from template file setting ion-scroll height attribute

I am really new with ionic, if I’ve mistaken with something please …TELL ME :smile:

2 Likes
7

thanks beard man! you save my life.