Hide tabs when keyboard open ANDROID


#1

Hi,

I’m new to Ionic and for a schoolproject we are working on an application for the Android and iOS platform.
I use tabs in the ion-footer-bar, in one of these tabs I have a chat function.
The issue is; when the keyboard opens the tabs go on top of it.
I have tried everything to solve this issue, in this forum I found a solution.
The only problem is that this solution has solved the problem only on the iOS platform.
Does anyone know/ can please help me how can I solve this problem for the Android platform?
Thank you in advance :slight_smile:


#2

Thank’s for all the reply’s! :frowning:

I went research some more about this matter. And found that on Android you can use adjustPan on the XML. By doing this the keyboard will overlay the tabs. This is nice! The problem is that my chatbox is now covered by the keyboard. My new question is; is there a way to attach that sepcific chatbox to the keyboard when open? I have read something about
.

I have implemented this but still the chatbox does not attaches to the keyboard when open.
Can someone help me getting my chatbox/textbox attached to the keyboard when opening?
Any help I would really appreciate.

Regards,

This is the code I’m using:

<ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
        <label style="background-color: #DDD" class="item-input-wrapper">
                <textarea focus-me="focusOnMe" ng-keypress="updateEditor()" ng-model="message" style="background-color: #DDD"> </textarea>
            </label>
            <button ng-click="Sendmessage(message);" class="button button-clear button-positive">
                <b><font size="4">Send</b></font>
            </button>
        </ion-footer-bar>

#3

Did you make progess on this? Facing the same issue. Tabs moving up when keyboard opens when android:windowSoftInputMode="adjustResize" and when doing android:windowSoftInputMode="adjustPan" the keyboard-attach directive does not work. The footer does not move up.


#4

Claw,

Yes we have solve this issue after hours of research.
This is what we have done to accomplish this for the Android platform.

Project folder => Platforms => Android => AndroidManifest.xml
Here you wil set the following; <activity android:configChanges=android:windowSoftInputMode="adjustResize">

Then let your app know what to show when keyboard is open, this is fixed by the CSS file
Project folder => www => CSS => style.css
In this file you will set the following code;

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

Than go to the Project folder => www. => js => app.js
Here is where the magic happens, you will define fullscreen at the beginning (on device ready) by writing this code ionic.Platform.isFullScreen = true;.

angular.module('starter', ['ionic', 'ui.router',  'etc etc ect'])
        .run(function ($rootScope, $ionicPlatform) {
            $ionicPlatform.ready(
                cordova.plugins.Keyboard.disableScroll(true);
                ionic.Platform.isFullScreen = true;

Last but not least, check if you have the following declared in your footer in the html file.

<ion-footer-bar  keyboard-attach align-title="left" class="bar-stable">

I hope this resolves your issue, if so please let us know because this is a very popular issue with little documentation or support.


#5

Thank you for your response!
However, in the adjustments you describe, this very line <activity android:configChanges=android:windowSoftInputMode="adjustResize"> breaks my compiling.
Gives the error

ERROR running one or more of the platforms: Error: Unquoted attribute value
Line: 5
Column: 268
Char: a
You may not have the required environment or OS to run this project

Is this really the correct line to write in the Manifest?


#6

Hi Claw,

I just added the most important part for that specific line, normally there are more things included depending on your project. The following line is what I have but this doesn’t mean this line has to be exact the same on your project.

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="Auxilium" android:screenOrientation="portrait" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">

But the error that is shown looks like you are missing some quotes in that specific line. Or there might be some syntax issues on that line. I would recomend you to look carefully at that line of code and check if the syntax is correct.

Let me know :smile:


#7

I could compile now. But this did not quite solve my problem :confused:
I’m using the ion-footer-bar above the tabs and implementing your suggestions made the footer bar become white when the keyboard opens, but does not hide the tab bar. Too bad it did not work. If I did not have the footer, the solution of doing android:windowSoftInputMode="adjustPan" in my Manifest along with ionic.Platform.isFullScreen = true; in the app would have worked. However, I need the footer.

I now “fixed” the problem by putting the tabs bar on the top on Android…

Thanks for your help and fast responses anyway!


#8

Hi Claw,

My bad I have forgotten this line of code in your HTML file.

 <ion-footer-bar  keyboard-attach align-title="left" class="bar-stable">

Try this if you want.

Regards


#9

I got the keyboard-attach directive on my footer. Does not work however :confused:


#10

Not cool man, sry to hear that.
This is what I have done in our project, this is a really annoying problem.

Last try; did you installed the keyboard plugin?
Do you see it in your project? If not you have to install it to make this work.
Maybe remove and reinstall your keyboard-plugin.

In this link you can download the plugin.


How to hide the Tab Bar when Keyboard is open
#11

I have it installed… :confused: too bad


#12

Thanks all, but i found a better solution here:
how-to-hide-the-tab-bar-when-keyboard-is-open