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?

We are also facing the same issue. Is there any easier solution than using the java script? Can't we manipulate the CSS directly?

Hi Rita Araújo,

We are using style.bottom for getting input container bottom value.
Hope this helps.
Thanks

Rita Araújo wrote:

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?



Hi eric lind,

Seems a bug in outsystems.
I tried few tricks to get output as we required. But you can try other ways.

Please let us know.
Thanks


eric lind wrote:

We are also facing the same issue. Is there any easier solution than using the java script? Can't we manipulate the CSS directly?



eric lind wrote:

We are also facing the same issue. Is there any easier solution than using the java script? Can't we manipulate the CSS directly?

Hi Eric,

We tried this solution but not able to control the bottom space.

and found the workaround.

Inside extensibiity configuration inside preferences used the below code and this code is working fine



         
       
            "ios":
            [
               
                {
                    "name": "DisableViewportFitForiOS12",
                    "value": "true"
                }
            ]
    

Hope it help you to solve your problem.



Regards,

Pankaj

Hi, 

I have solved this problem with a blank container with a height of 600px at the bottom of the screen. 

Create a local variable for the container's visible field to control when it will be shown and with a boolean data type. Also, create an action to control the state of the local variable. Furthermore, in the input field, set on the onclick event to pass true to the action and onblur event you should pass false. 

So, the result of this should be when clicking on the input field, the blank space will show and when you leave the field, the blank space will be hidden. By doing that you get more space for the screen and the keyboard can be adjusted properly.

If it doesn't work for you, try to change the value of the height of the container. I hope it helps you!