Ion footer bar too high with tabs on bottom and keyboard open

ionic-v1
1

Hi all,

We have an app with tabs on the bottom and a text input in an ion-footer bar as per the elasti-chat example.

IOS works fine but on Android devices we see a blank space between the keyboard and the footer. Appears to be same size as the bottom tabs. Have tried various methods with CSS and keyboard handlers to reposition the footer bar but Ionic is setting it automatically as bottom:313px when actually it should be bottom: 269px. This 44px difference corresponds to the height of the bottom tabs.

Utterly frustrated having now spent 3 days trying to solve this and am almost suicidal. Any suggestions very gratefully received.

image
chatview.jpg2309×1920 336 KB

Using plugin: com.ionic.keyboard 1.0.4 and Ionic 1.0.0

2

Have you tried

adding the class hide-on-keyboard-open on the ion-tabs?

or maybe

keyboard-attach directive on your tab bar?

I’d recommend looking at it from the google chrome inspector tools(chrome://inspect/#devices) and fiddle with the css from there I too have experienced some CSS rules which were platform specific + full screen specific

3

Yes, the hide on keyboard open class hides all the tab/page content as well - we have <ion-nav-view> within each of the tabs so that’s no go.

Just tested adding keyboard-attach to the tabs but that makes no difference.

Have spent 3 days inspecting with Chrome and I know exactly what CSS needs to change:-

The main <ion-content> section is being set by ionic with bottom: 357px but should be 357-44 = 313px
and the <ion-footer-bar> is being set with bottom: 313px but should be 313-44 = 269px

This CSS is added dynamically by ionic when the keyboard opens so I can’t override it even with a really specific CSS class.

4

Further to this, if I use the keyboard handler to report the height of the keyboard we find it is 313px BUT this seems to be incorrect, I think 313px is keyboard + bottom tabs.

5

Just for a quick fix so your users aren’t impacted… for now, why don’t you just inject the CSS classes after the keyboard has opened?

//call this chunk after your keyboard is open
if ($ionicPlatform.isAndroid()) {
       var footer_bar_container = document.querySelector('#your-footer-bar-id');
       footer_bar_container.style.bottom: 269px;
}
6

Thanks for replying sam, I’ve already tried that by attaching a directive to the footer bar. Sadly the bottom setting for each of the elements gets overridden by Ionic.

.directive('fixAndroidKeyboard', function ($window,$rootScope,$ionicPlatform) {
return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
        if($ionicPlatform.is('android'){
            angular.element($window).bind('native.keyboardshow', function(el) {               
                var kh = el.keyboardHeight;
                var keyTop = kh-44;
                var content = angular.element(document.querySelector('#detailView'));
                element[0].style.bottom = keyTop+"px"; 
                content[0].style.bottom = kh+"px"; 
            });
        }
    }
};
})
7

Nice, that seems a more formal solution headed in the right direction. A couple more thoughts (you may have tried these already and I could be wrong…), have you tried

  1. Verifying order of events? Wrapping your code within the bind function with a $timeout and perhaps a console.log to make sure it is executed? Something with 100 - 500ms should be enough to justify if this solution should work…

  2. Adding an ‘important!’ to the style portion. Check out this stack overflow post. Seems pretty browser friendly w/ ie9+ support.

            element[0].setProperty("bottom", keyTop + "px", "important");
        content[0].setProperty("bottom", kh + "px", "important");

Really hope you find a solution too! I’ve definitely been stuck with something similar just not with the keyboard involved…

8

Sam, you’re a star for pointing me in the right direction.

Here’s the final directive if anyone else needs it

.directive('fixAndroidKeyboard', function ($window, $ionicPlatform) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if ($ionicPlatform.is('android')) {
                angular.element($window).bind('native.keyboardshow', function (el) {
                        var kh = el.keyboardHeight;
                        var keyTop = kh - 46;
                        var content = angular.element(document.querySelector('#detailView'));
                        element[0].style.setProperty("bottom", keyTop + "px", "important");
                        content[0].style.setProperty("bottom", kh + "px", "important");
                });
            }
        }
    };
})
9

i am trying if this is soul than thanks

10

not working…
my problem is that…i have 4 tabs in ioni v1 footer bar in which on tab is mesg tab so whenever i open mesg tab than all four tabs covering big size…can someone soul my problem
thans in advance.