Ionic, keep button above keypad on iOS

Question

I need the "OK" button at the bottom of this page to stay above the keypad when opened. It works on Android as you can see in the screenshot on the left, but not in IOS (screenshot on the right).

Can you help me with the code please ?

Moreover, as you can see the "select-on-focus" directive doesn't work in iOS... And the keypad should the numeric keypad (phone pad) on iOS...and it's not.

3 issues then ;)

Here's a video: https://youtu.be/_bOWGMGesgk

Here's the code:

<div class="wrapperFlex withNextButton">
<div class="itemTitle">
    <div class="text">
        {{'paramQuestions.weight' | translate }}
    </div>
</div>

<div id="weightdata" class="itemParameters weightdataclass row">

    <input class="weightinput" type="number" name="userweight" ng-min="{{data.minWeight}}" ng-max="{{data.maxWeight}}" ng-model="data.realWeight" ng-change="updateViewGenVol(data.weightunit, data.userweight, data.BLfactorValue);saveUserWeight()" select-on-focus required></input>
    <div class="weightunitradios">
        <ion-checkbox class="checkboxes checkbox-blueboardline" ng-model="data.weightunit" ng-true-value="'kg'" ng-false-value="'lbs'" ng-change="saveWeightUnit(); changeMinMax(); convertWeightInput(); saveUserWeight();">kg</ion-checkbox>
        <ion-checkbox class="checkboxes checkbox-blueboardline" ng-model="data.weightunit" ng-true-value="'lbs'" ng-false-value="'kg'" ng-change="saveWeightUnit(); changeMinMax(); convertWeightInput(); saveUserWeight();">lbs</ion-checkbox>
    </div>
</div>
</div>

directives.js:

.directive('selectOnFocus', function ($timeout) {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          var focusedElement = null;

          element.on('focus', function () {
              var self = this;
              if (focusedElement != self) {
                  focusedElement = self;
                  $timeout(function () {
                      self.select();
                  }, 10);
              }
          });

          element.on('blur', function () {
              focusedElement = null;
          });
        }
  }
})

Answer 1

For the keyboard/scroll issue, I didn't find better than this directive (only for ios):

.directive('keyboardResize', function ($ionicScrollDelegate) {
      return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {

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

            if (ionic.Platform.isIOS()) {
              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);
              });
            }

        }
      }
    })