bazuka5801
commented
1 year ago @roman-rr Keyboard issues is my common work when I started a new mobile project. I want to explain my experience to help cupertino pane make better.
On ios/android we have these options to control resize mode from @capacitor/keyboard plugin, same in cordova only another name.
| Members | Value | Description | Since |
|---|---|---|---|
| Body | 'body' | Only the body HTML element will be resized. Relative units are not affected, because the viewport does not change. | 1.0.0 |
| Ionic | 'ionic' | Only the ion-app HTML element will be resized. Use it only for Ionic Framework apps. | 1.0.0 |
| Native | 'native' | The whole native Web View will be resized when the keyboard shows/hides. This affects the vh relative unit. | 1.0.0 |
| None | 'none' | Neither the app nor the Web View are resized. | 1.0.0 |
On android we also have soft input, we can use it multiple using |, ex.
<activity android:windowSoftInputMode="stateHidden|adjustResize" ... >In my projects i am using none resizing and control to control all by my self, it's right way to do app without keyboard glitch for users.
And for android i use "adjustPan", but for newer android it not working, but works with "stateHidden|adjustPan|adjustNothing". A bit strange adjustNothing not available in docs, i found it in some stack overflow question few days ago.
For smooth animation, when keyboard open, I inject css variable
Keyboard.addListener('keyboardWillShow', info => {
document.documentElement.style.setProperty('--keyboard-height', info.keyboardHeight + 'px')
})And use it in css
.cupertino-pane {
padding-bottom: var(--keyboard-height);
}If you have any questions, I'm willing to help.
[x] Review body resizing for iOS / Android with all:
capacitor / cordova / web
iOS / Android Determinate a reason of resizing and prevent it.
[x] Memorize setHeight position for opened keyboard to bounce back on hide
[ ] Add proper height value to offset on start click (in case of dragging after setHeight with keyboard)