In an android setup, whenever the ionic searchbar or ion-input is focused on and the device keyboard pops up, the entire screen seems to be resized. My app requires the keyboard to float over the content, instead of pushing the screen up or resizing it. Using Keyboard.disableScroll(true) and setting scrollAssist and autoFocusAssist doesn’t seem to work at all. Are there any other workarounds?
2 Likes
I’m interested on this issue as well,
but also, since beta.8 upgrade, my app pops the keyboard when its focused… messy.
The Keyboard issue got solved removing the code of Keyboard (ionic-native) and using Crosswalk, hopefully I won’t suffer that again.
I actually am having the opposite problem. I’m trying to create a messaging interface with a docked input area at the bottom of the screen. On Android, the content view resizes appropriately and pushes the toolbar to the top of the keyboard. This does not happen on iOS. I’ve tracked it down to the input looking for either a ion-item or the next closest positioned element to calculate the scroll assist. Not sure if there is another way to accomplish what I want or if it is appropriate to ask for support for an additional directive in the scroll assist to calculate scroll against.
Note that if I implement crosswalk and removing the ionic-native keyboard module then I’ll have the same problem on Android. But I might just be crazy with my template.
My template for the view is
<ion-navbar *navbar secondary>
<ion-title>{{ isNew ? 'New ' : '' }}Thread{{ topic ? ': ' + topic.name : ''}}</ion-title>
</ion-navbar>
<ion-content class="thread">
<ion-list>
<ion-item *ngFor="let message of messages" no-lines>
<ion-avatar item-left *ngIf="!message.isSelf">
<ion-icon [name]="message.user.icon" style="font-size: 36pt"></ion-icon>
</ion-avatar>
<p>{{ message.message }}</p>
<ion-avatar item-right *ngIf="message.isSelf">
<ion-icon [name]="message?.user.icon" style="font-size: 36pt"></ion-icon>
</ion-avatar>
</ion-item>
</ion-list>
</ion-content>
<ion-toolbar position="bottom" class="composeArea">
<form>
<ion-input ref-composeinput type="text" [(ngModel)]="compose" placeholder="Write a message..."></ion-input>
<button (click)="send()" clear type="submit">
<ion-icon name="send"></ion-icon>
Send
</button>
</form>
</ion-toolbar>
I had previously tried other templates for the input area, but that is the only template that allows a user to enter text and also hit the send button without causing the keyboard to blur and hide.
The code responsible for calculating the scroll assist is here:
ionic-angular/components/input/input-base:290-345
/**
* @private
*/
InputBase.prototype.initFocus = function () {
var _this = this;
// begin the process of setting focus to the inner input element
var scrollView = this._scrollView;
if (scrollView) {
// this input is inside of a scroll view
// find out if text input should be manually scrolled into view
// get container of this input, probably an ion-item a few nodes up
var ele = this._elementRef.nativeElement;
**ele = dom_1.closest(ele, 'ion-item,[ion-item]') || ele;** // This is where I think we should have a [scroll-root] directive or something to get around the element's offsetParent preventing the correct scroll assist.
var scrollData = InputBase.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getContentDimensions(), this._keyboardHeight, this._platform.height());
if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
// the text input is in a safe position that doesn't
// require it to be scrolled into view, just set focus now
this.setFocus();
this.regScrollMove();
return;
}
if (this._usePadding) {
// add padding to the bottom of the scroll view (if needed)
scrollView.addScrollPadding(scrollData.scrollPadding);
}
// manually scroll the text input to the top
// do not allow any clicks while it's scrolling
var scrollDuration = getScrollAssistDuration(scrollData.scrollAmount);
this._app.setEnabled(false, scrollDuration);
this._nav && this._nav.setTransitioning(true, scrollDuration);
// temporarily move the focus to the focus holder so the browser
// doesn't freak out while it's trying to get the input in place
// at this point the native text input still does not have focus
this._native.beginFocus(true, scrollData.inputSafeY);
// scroll the input into place
scrollView.scrollTo(0, scrollData.scrollTo, scrollDuration).then(function () {
// the scroll view is in the correct position now
// give the native text input focus
_this._native.beginFocus(false, 0);
// ensure this is the focused input
_this.setFocus();
// all good, allow clicks again
_this._app.setEnabled(true);
_this._nav && _this._nav.setTransitioning(false);
_this.regScrollMove();
if (_this._usePadding) {
_this._scrollView.clearScrollPaddingFocusOut();
}
});
}
else {
// not inside of a scroll view, just focus it
this.setFocus();
this.regScrollMove();
}
};
Its happened to me while a go, i’ve managed to solved this by installing the ionic-plugin-keyboard.
If you like to wait for about 4000ms the keyboard will push the content so the bottom can be fill. But if you would like to the keyboard push the content right away you will have to put the hide-on-keyboard-open
But the problem is now my background colour (which only on styling colour by css) turned white 
(and dunno how to turn back to the original colour)
but the problem get solved !
goodluck