How to keep button above keypad on iOS ... keyboard open doesn't reduce the view height

ionic-v1
1

Hi

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 but not in IOS.

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 on iOS…and it’s not.

3 issues then :wink:

Here’s a video:

image
android.png1080×1920 92.9 KB

Uploading…

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;
          });
        }
  }
})

ionic info :

Cordova CLI: 5.4.1
Ionic Framework Version: 1.2.4
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID:	Ubuntu Description:	Ubuntu 14.04.4 LTS 
Node Version: v0.12.9
2

  1. Well, for the keyboard part, try input type = ‘tel’. From the official doc, if you just need numbers, use 'tel’
    http://ionicframework.com/html5-input-types/#number

  2. Where is the OK button in the code above? Is it placed inside an ion-footer directive?

  3. Will check out the select on focus issue

3

thanks for your message @Srijith

  1. thanks for the “type=‘tel’” trick. However I need the “.” to separate decimal numbers…

  2. The OK button is not in a ion-footer directive, but just like this :slight_smile:

    <button ng-if="!data.firstNavParam" class="nextSlideButton button button-full" ng-click="goToNextSlide()">
 OK
</button>

css :

.button.button-full.nextSlideButton {
	position: absolute;
	bottom: 0;
	margin-bottom: 0;
	left: 0;
        height: 53px;
	background-color: #06b4c8;
}

If I use keyboard-attach on the OK button, it moves up the keyboard, but covers the rest !! :cold_sweat:
It’s like the height of the view doesn’t change when ios keyboard pops up, whereas it changes on android !!! Any idea what’s happening ?

I have to mention that this code is within a slidebox, but I just tested without the slidebox (normal view) and it’s the same bug.

  1. thanks let me know !
4

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);
              });
            }

        }
      }
    })

but I can’t believe there is no better way, more elegant, to do this… ?

5

Hey @LouisR , could you also try placing the okay button inside ion-footer? And if you have a codepen, I can look into this

6

Hey @Srijith, I think that if I place the button in a footer, popping the keyboard will not resize the view, and the button will cover the important area.

I don’t have a codepen yet. Do you think you can help me with the focus problem on iOS ? Is making a codepen gonna be useful for an iOS bug ?

7

@LouisR we could do a codepen and try it on safari. If that doesn’t help, I might need to look into your code. Or we could do this. Start a blank ionic starter app, introduce your keyboard problem there and then we could debug.