CODEWITHSUNDEEP
androidangularjsionic-frameworkandroid-softkeyboard
ohnu93
ohnu93

Reputation: 273

Ionic Android Keyboard Issues

I'm new to ionic. I began designing and developing my app but I got to a problem very soon. I don't really know how iPhone works because I am only testing this on my android device.

In my app, I am using the starter tabs template with a header at top, tabs at bottom. In one of my nav-views, I have a fixed control area, a scrollable area, and a fixed narrow input area. Below is a simple description of my app layout:

rough layout of my app

The problem that I'm facing here is when I click on the input area for input, the android keyboard pops up, pushing my scroll area, input area, and tabs upwards so that my screen would look like the following:

keyboard open

This basically "jams" my app appearance. So I came to thinking how others have dealt with it. From googling I found that I could hide things when keyboard is active by giving "hide-on-keyboard-open" class to my divs but this would just display: none while still holding its width, height, and place.

My question is are there any ways to literally "remove" my elements when my keyboard is open and "restore" them when my keyboard is closed? I tried 

window.addEventListener('native.keyboardshow', function(){
  document.body.classList.add('keyboard-open');
});

if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) {
  angular.element(document.querySelector("div.tab-nav.tabs").remove());
}

to add keyboard-open class to my body element and delete my tabs (even though I think I should monitor the tabs' class changes for the remove() action for it to work, but I only found jQuery ways to do it and I believe that's against the rules of angularJS?) but it didn't work.

So, what are the common ways to deal with this? As I kept thinking about it, I believe just removing and restoring certain elements or, whether it's possible or not, having keyboard come on top of the body element (just like z-index differences) wouldn't really be a pretty experience.

Thanks in advance for help.

Upvotes: 3

Views: 2752

Answers (2)

pihh-rocks
pihh-rocks

Reputation: 308

Well it's never too late to post an answer. I managed to solve this problem based on some of this answers.

My solution:

Index.html Added a ng-class listening to the showTabs attribute.

<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">

style.css Added the following snippet so the tabs are hidden in case of keyboard open

.is-keyboard-open .tabs{
  display:none;
}
.is-keyboard-open .has-tabs{
 bottom:0;
 }

app.js On app.js, in the app.run method, I added the window.eventListener to the native.keyboardshow and hide in order to target in real time whenever the keyboard fires or hides.

Note that I used isAndroid() because I only had this problem in android.

   $rootScope.showTabs = true;
   if(ionic.Platform.isAndroid()){
      window.addEventListener('native.keyboardshow', keyboardShowHandler);
      window.addEventListener('native.keyboardhide', keyboardHideHandler);

      function keyboardShowHandler(e){
         $rootScope.showTabs = true;
      }

      function keyboardHideHandler(e){
          $rootScope.showTabs = false;
      }
   }

Now everything is working as it should.

Notes: I tried previously: - add more z-index @ .tabs - target the .tabs via css only - position: fixed + bottom:0 @ tabs - a lot of answers on ionic forums and stack overflow

This was the best solution I found.

PS: Upvoted this one because I gained some white hairs trying to solve it properly.

Upvotes: 2

ohnu93
ohnu93

Reputation: 273

I resolved this by "removing" and "restoring" my contents as yurinondual suggests in this link from ionic forum.

The suggestion was via css manipulation:

.keyboard-open .tabs{
  display:none;
}
.keyboard-open .has-tabs{
  bottom:0;
}
body.keyboard-open .has-footer{ 
  bottom: 0;
}

Upvotes: 0

Related Questions