Remove keyboard-attach directive from ion footer bar

#1

Hello, is there a way to remove the keyboard-attach directive from the ion-footer-bar? I know I can hide it with CSS, but just wondering if there’s a built-in way to disable that feature for the footer bar.

#2

AFAIK, it’s not built into the footer-bar by default. It’s something that you have to explicitly add it.
Could you explain a bit more?

#3

I thought it was built in because, by default, the footer bar would jump up above the keyboard. But I see now this is just in virtue of the CSS; it’s absolutely positioned at the bottom of the <ion-content> element, and when a user opens the keyboard the height of <ion-content> is adjusted to fit in whatever space is left on the screen, and that’s why the footer is above the keyboard. I initially thought the keyboard-attach directive was responsible for this.

So, what if I want the height of <ion-content> to remain unchanged when the keyboard is visible, is that possible?

#4

Yup, checkout the keyboard docs

http://ionicframework.com/docs/api/page/keyboard/

cordova.plugins.Keyboard.disableScroll(true)

#5

How can you disable the footer being attached at the top of the keyboard on Android?

#6

If you’re not adding keyboard-attach to the footer, it shouldn’t be pushing up.

Please check the docs as they reference what should be done for android

#7

@mhartington
I have gone through the documents but i can find no solution for this.
Adding keyboard-attach makes the transition smoother but removing it does not stop the footer from following the keyboard.

I have tries all three available android configurations but i dont see any difference

#8

Hmm, I see what you mean. Didn’t realize that this was happening. Well you could show/hide the footer based on if the keyboard is open.

  $scope.showFooter = true;

  window.addEventListener('native.keyboardshow', function() {
    $scope.showFooter = false;
  });

  window.addEventListener('native.keyboardhide', function() {
    $scope.showFooter = true;
  });

<ion-footer class="bar-stable" ng-if="showFooter"></ion-footer>
#9

You can also add a hide-on-keyboard-open class. See http://ionicframework.com/docs/api/page/keyboard/

#10

Right, you could do that too, but my method removes the footer from the dom, which will cause ion-content to resize correctly.

hide-on-keyboard-open just sets the display to none, so it will still be in the dom

#11

for now I am using mhartington’s way which works fine.
I think this should be added as an option in the ion-footer directive.

#12

Well in iOS, it works as intended, but for Android, they have a few different options when a keyboard is shown

Android Notes
If your app is running in fullscreen, i.e. you have <preference name="Fullscreen" value="true" /> in your config.xml file you will need to set ionic.Platform.isFullScreen = true manually.

You can configure the behavior of the web view when the keyboard shows by setting android:windowSoftInputMode to either adjustPan, adjustResize or adjustNothing in your app’s activity in AndroidManifest.xml. adjustResize is the recommended setting for Ionic, but if for some reason you do use adjustPan you will need to set ionic.Platform.isFullScreen = true.

#13

Unfortunately, when i try this, once the footer is hidden, it does not show up again. Please advise

#14

Please share some code or a simplified codepen for me to test a device.

#15

$scope.showFooter = true;

window.addEventListener(‘native.keyboardshow’, function() {
$scope.showFooter = false;
});

window.addEventListener(‘native.keyboardhide’, function() {
$scope.showFooter = true;
});

I have used exactly this - but the problem is ONLY on Android 5. Once the ng-if hides the footer, it does not show back the same again. I will try to create a codepen and share.

#17

You need to call $scope.$apply() after setting the $scope.showFooter` boolean.