Change ion-scroll height based on keyboard state

ionic-v1
1

Hello,

I have pretty complicated view but here is relevant part:

<ion-scroll bindonce direction="y" scrollbar-x="false" scrollbar-y="false" ng-style="{'height': ScreenSize.pxH(60)}">          
         <wm-contacts-list
             filter-by-name="{{contactNameFilter}}"
             on-contact-click="onContactClick(value)"
             ></wm-contacts-list> 
        </ion-scroll>

In current example I use ScreenSize.pxH(60) a.e. 60% from screen height. The ion-scroll has about 10 items and when I open keyboard it overlap my ion-scroll and I can’t get last items, I don’t see them. So I need close keyboard 1st.

Is there any flag to resize (change height) ion-scroll regards to keyboard state?

Thanks.

2

Do you have the ionic keyboard plugin installed?

3

Yes, org.apache.cordova.plugin.softkeyboard. Thanks

4

You can get the height of the keyboard when it’s opened and then adjust the ion-scolls height based on that.

But with out looking at the project and seeing the whole thing, it’s hard to tell what would be the best solution.

Why are you using an ion-scroll too BTW?

5

I want to make scrollable only part of view (in my case 60%). all other space used for custom objects (labels, sliders …).

As I remember this plugin for iOS only

6

Alright, makes sense. Any way you could put together a codepen sample or plnkr and I can better give you an anwer?

7

I’ll try to get new var new_height = window.innerHeight and after:

var keyboard_height =  (old_height - new_height) ;
8

I had a similar issue with ion-scroll and the cause was in fact, that parent element for ion-scroll has height: auto, so if you change the size of ion-scroll, it will also change the size of its parent element by the same value, so the percentages height of scroll area is still the same. Try to set the height of the parent element to 100% (or anything you want, just set it to other value then auto).
Example:

<div class="parent" style="height:100%">
  <ion-scroll>
    <div class="scroll doesntMatterHowHighIsThis">
    </div>
  </ion-scroll>
</div>
9

I made the following simple directive to solve the issue:

angular.module('mindspaceApp')
      .directive('keyboardResize', function keyboardResize() {
      return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {


             function onKeyboardShow (e) {
                element.css('bottom', e.keyboardHeight + 'px');
                $ionicScrollDelegate.$getByHandle(attrs.delegateHandle).resize();
            };
            function onKeyboardHide (e) {
                element.css('bottom', '');
                $ionicScrollDelegate.$getByHandle(attrs.delegateHandle).resize();
            };

            ionic.on('native.keyboardshow', onKeyboardShow, window);
            ionic.on('native.keyboardhide', onKeyboardHide, window);


            $scope.$on('$destroy', function () {
                ionic.off('native.keyboardshow', onKeyboardShow, window);
                ionic.off('native.keyboardhide', onKeyboardHide, window);

            });

        }
    };
});

Use as follows:
<ion-content keyboard-resize delegate-handle="search-scroll">

Enjoy

10

this dint work to me

11

not working for me also