I have a page filled with text fields. Some of them are dynamic. Whenever I tap on a text field or programmatically bring the focus to a field, the keyboard opens up and the text field on focus scrolls above the keyboard. All of this is working in other versions of ios except ios12.
In ios 12, when the keyboard closes, the UI looks fine but on inspecting the ui in xcode, the html element and its child ion-app takes only a fraction of the screen (space other than the portion occupied by keyboard when it was open). The elements are seen in right position but the events bound to them dont work when you tap on them but works when you tap a few inches above(position where they would be when the keyboard is open).
The following image is the html element inspected from xcode before opening the keyboard.
This issue does not happen when I set keyboard.disableScroll(true). But then, the keyboard scrolls above the inputs and hides them. That is also not desirable.
Also, I have set in config.xml. So the screen doesn’t actually resize when the keyboard pops up.
Any help here is greatly appreciated. Please find my environment info below.
Same issue here guys…I have some click listener that don’t get fired after closing the keyboard. If I tap inside the after some tabs it gain again full height and everything start again…
I am seeing the same issue, when using keyboard arrows to scroll through the input fields and then closing the keyboard the buttons in my toolbar cannot be clicked. When you press them nothing happens.
This issue is consistently reproducible and makes the app unusable
This is NOT happening in iOS 11
Interesting I also see this in the Xcode logs
**Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.**
**The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.**
**2018-09-27 19:23:09.665225+0100 App[11406:2676692] [LayoutConstraints] Unable to simultaneously satisfy constraints.**
**Probably at least one of the constraints in the following list is one you don't want.**
**Try this:**
**(1) look at each constraint and try to figure out which you don't expect;**
**(2) find the code that added the unwanted constraint or constraints and fix it.**
**(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)**
**(**
**"<NSAutoresizingMaskLayoutConstraint:0x283898e10 h=-&- v=-&- _UIToolbarContentView:0x103b1d770.width == UIToolbar:0x103b1d330.width (active)>",**
**"<NSLayoutConstraint:0x28388df90 H:|-(0)-[_UIButtonBarStackView:0x103b16ca0] (active, names: '|':_UIToolbarContentView:0x103b1d770 )>",**
**"<NSLayoutConstraint:0x28388dfe0 _UIButtonBarStackView:0x103b16ca0.trailing == _UIToolbarContentView:0x103b1d770.trailing (active)>",**
**"<NSLayoutConstraint:0x283887e80 H:|-(8)-[_UIModernBarButton:0x103d54d70'Done'] (active, names: '|':_UIButtonBarButton:0x103d541e0 )>",**
**"<NSLayoutConstraint:0x283887ed0 H:[_UIModernBarButton:0x103d54d70'Done']-(16)-| (active, names: '|':_UIButtonBarButton:0x103d541e0 )>",**
**"<NSLayoutConstraint:0x283898230 'UISV-canvas-connection' UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide'.leading == _UIButtonBarButton:0x103d514b0.leading (active)>",**
**"<NSLayoutConstraint:0x283898410 'UISV-canvas-connection' UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide'.trailing == _UIButtonBarButton:0x103d541e0.trailing (active)>",**
**"<NSLayoutConstraint:0x283898460 'UISV-spacing' H:[_UIButtonBarButton:0x103d514b0]-(0)-[UIView:0x103d53490] (active)>",**
**"<NSLayoutConstraint:0x2838984b0 'UISV-spacing' H:[UIView:0x103d53490]-(0)-[_UIButtonBarButton:0x103d53670] (active)>",**
**"<NSLayoutConstraint:0x283898500 'UISV-spacing' H:[_UIButtonBarButton:0x103d53670]-(0)-[UIView:0x103d54000] (active)>",**
**"<NSLayoutConstraint:0x283898550 'UISV-spacing' H:[UIView:0x103d54000]-(0)-[_UIButtonBarButton:0x103d541e0] (active)>",**
**"<NSLayoutConstraint:0x283898fa0 'UIView-Encapsulated-Layout-Width' UIToolbar:0x103b1d330.width == 0 (active)>",**
**"<NSLayoutConstraint:0x28388de50 'UIView-leftMargin-guide-constraint' H:|-(0)-[UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide'](LTR) (active, names: '|':_UIButtonBarStackView:0x103b16ca0 )>",**
**"<NSLayoutConstraint:0x28388dea0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide']-(0)-|(LTR) (active, names: '|':_UIButtonBarStackView:0x103b16ca0 )>"**
**)**
**Will attempt to recover by breaking constraint**
**<NSLayoutConstraint:0x283887ed0 H:[_UIModernBarButton:0x103d54d70'Done']-(16)-| (active, names: '|':_UIButtonBarButton:0x103d541e0 )>**
By removing the old deprecated keyboard and installing the new cordova-plugin-ionic-keyboard the content no longer shifts like the original image.
Only problem is that there are issues with the overlapping of inputs and the keyboard now.
Mainly on IOS, but selecting the inputs will try to scroll them into view, but if you select inputs closer to the bottom of the page the keyboard overlaps, and this is made worse if you have an ion-footer that gets docked to the bottom too.
@Lordsteggu This is where I am now too… Using the new keyboard plugin (which feels half baked) I am able to get to an acceptable level of functionality except for fields being covered by the keyboard on iOS.
So the above fixed my android issues, with the new keyboard there is no keyboard.disableScroll(), not sure how much difference this made as I haven’t personally used that before on the old keyboard.
Any new informations about this bug?
Current workaround is to build iOS app with xCode 9, that will work. But sooner or later Apple will reject apps uploaded via xCode 9, so this is only teporary. Also it makes great struggle while testing app on iOS 12 devices, since you need to switch between 2 xCode versions over and over.
On the app.component.ts, inside the constructor, every time the keyboard shows set the height as auto for the html tag. When the keyboard hides set the height as 101vh and this will make the app to readjust the heigh, the scroll problem will disappear.
import {Renderer2} from '@angular/core';
let html = document.getElementsByTagName('html').item(0);
this.keyboard.onKeyboardHide().subscribe(() => {
this.renderer2.setStyle(html, 'height','101vh')
});
this.keyboard.onKeyboardShow().subscribe(() => {
this.renderer2.setStyle(html, 'height','auto')
});