Ionic

Ionic V1 Keyboard Close Leaves Content Up

By October 11, 2019 June 30th, 2020 No Comments

I had a main chat area in center and a input box at bottom for sending message.

Following code did the trick for me.

1
2
3
4
5
6
7
8
9
// This prevents the issue of the unwanted space left below the messages after the keyboard is closed.
                $timeout(function () {
                    $ionicScrollDelegate.scrollBottom(false);
                    // safety net
                    $timeout(function () {
                        // no animation since this is only a safety net
                        $ionicScrollDelegate.scrollBottom(false);
                    }, 350);
                }, 350);

This was called on blur and on focus of the input and when the message was sent.

Also try


1
2
3
4
5
6
// https://trello.com/c/tqYMWkQt
// may require further timeout depending on the element taking focus. If it takes a bit later the blur should be after that.
document.activeElement.blur()
setTimeout(function(){
    document.activeElement.blur();
}, 800)