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.
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?
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?
Yup, checkout the keyboard docs
http://ionicframework.com/docs/api/page/keyboard/
cordova.plugins.Keyboard.disableScroll(true)
How can you disable the footer being attached at the top of the keyboard on Android?
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
@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
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>
You can also add a hide-on-keyboard-open
class. See http://ionicframework.com/docs/api/page/keyboard/
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
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.
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 eitheradjustPan
,adjustResize
oradjustNothing
in your app’s activity in AndroidManifest.xml.adjustResize
is the recommended setting for Ionic, but if for some reason you do useadjustPan
you will need to setionic.Platform.isFullScreen = true
.
Unfortunately, when i try this, once the footer is hidden, it does not show up again. Please advise
Please share some code or a simplified codepen for me to test a device.
$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.
You need to call $scope.$apply()
after setting the $scope.showFooter` boolean.