Closed roman-rr closed 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)