Hi,

In a mobile application, I have an input widget at the bottom of the screen.

Previously it's working fine in outsystems 10 with SilkUI input but now in outsystems 11 native ios build as well as outsystems now when I touch the input and the keyboard slides out from the bottom, covering the input.

Expected - Screen scrolls up and the input above the keyboard.

Mobiles: iPhone 5SE, iPhone6s
ios: 12.0
Android: working as expected.

Any help appreciated,
Thanks

Hi Viraj,


I am also facing the similar kind of issue in IOS. I am using Outsystems 10 with silk UI.

seems a bug.


Regards,

Pankaj

Thanks Pankaj pant,
For your quick response.


Hi Pankaj pant,

Anyhow I managed to figure out this issue with javascript till outsystems resolve this.

Initial CSS for input container:

.inputContainerInitial{
    background-color: #fff;
    position: relative;
    width: 100%;
    bottom: 0px;
}

onFocus event update the initial CSS with javascript
InputPositionUpdate Javascript:

var chatContainer = document.getElementsByClassName('inputContainerInitial');
chatContainer[0].style.position = "absolute";
chatContainer[0].style.bottom = (window.innerHeight) - (document.body.scrollTop) + "px";

onBlur event again set initial CSS with javascript
InputPositionIntial Javascript: 

var chatContainer = document.getElementsByClassName('inputContainerInitial');
chatContainer[0].style.position = "relative";
chatContainer[0].style.bottom = "0px";

I used the same call for onFocus and onBlur action.
In my case, having an issue only for iOS, for that I used client action GetPlatform. And input boolean 'result' for action triggered [focus/blur].

Hope this helps!
Thanks

Hello

Thanks for the solution.

I had the same problem, I Tried this solution but a get a space between the keyboard and the input field, any idea why? can you please explain the style.bottom your are using?

Using this same solution is there any way to define a margin-bottom equal to the keyboard height?