Canvas Support

Contact Modal scroll down when I tap on input text

11 replies · opened Apr 18, 2019

Llelejuve4everApr 18, 2019

Good morning SemiColonWeb Team,
i have a problem with my website (link https://www.telecomsrl.biz/ ). As you can see in the section "CONTATTI" when you click to the button "CONTATTACI" appears a modal contact form that it works fine on PC and iOS devices but it has a problem on Android devices. When you open modal or click on any present input text the window scroll to the bottom page while it does not happen in the other devices. The users have to scroll up for each input text and this is very annoying.
How can i solve this problem?
Waiting for your reply, I wish you a good day.
Samuele

📎 WhatsApp-Video-2019-04-18-at-18.11.52-1.mp4447 KB
SSemicolon WebSTAFFApr 19, 2019

Hello,

Apologies about the Inconveniences caused! We are working on investigating this issue at the moment on Physical Devices and will get back to you with a Solution shortly. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Llelejuve4everApr 19, 2019

Thanks for your answer. Canvas and my site work fine except this problem but i can't solve it.

Yesterday I made a lot of test and I noticed that if model is opened at the top of the page (e.g. forms-modal-health.html and the other modals) it works fine. When modal is opened like mine after the beginning of the page the problem appears in Android devices. I hope this can be useful.

Waiting for your reply, I wish you a good day.
Samuele

Llelejuve4everApr 19, 2019

Sorry but in the previous message i forgot to warn you that this problem appears only on android devices that use Google Chrome browser; in other browser for Android (e.g. Mozilla Firefox) and whole browsers for iOS devices it seems to me that it works fine.
I hope this can be useful.

Waiting for your reply, I wish you a good day.
Samuele

SSemicolon WebSTAFFApr 22, 2019

Hello,

Thanks for your Valuable Patience with this!

We have been checking this out for a while and the issue appears to be with the Android Browser. Consider adding the following JS code at the bottom of the Page just after the js/functions.js JS File Linking: 


if(/Android 4\.[0-3]/.test(navigator.appVersion)){
   window.addEventListener("resize", function(){
      if(document.activeElement.tagName=="INPUT"){
         window.setTimeout(function(){
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

This should fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Llelejuve4everApr 22, 2019

Thanks for your answer.

As you can see visiting my website I added the JS code at the bottom of the page just after the js/functions.js but with Android Chrome browser the problem hasn't been resolved. I'm using for the test Honor 9, Honor 10 and One Plus 6. Can you send me another solution please?

Waiting for your reply, I wish you a good day.
Samuele

Llelejuve4everApr 26, 2019

Good morning SemiColonWeb Team,

Any news for me?

Waiting for your reply, I wish you a good day.
Samuele

SSemicolon WebSTAFFApr 26, 2019

Hello,

Thanks for your Patience on this!

We have gone through many articles and solution on the web including trying many of them and it appears this is not an Issue with the Template but Native Android and how it handles the Keyboard when clicked on an Input inside the Modal. This issue does not exist on iOS Devices. You can check the Full Article here: https://www.outsystems.com/forums/discussion/22410/mobile-input-on-bottom-of-screen-behind-android-keyboard/#Post90997 .

Unfortunately, there is currently no solution for this since there are no codes in the Template that interferes with the default functionality of the Browser on Android. We will release an update once there is an Actual Fix for this.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Llelejuve4everMay 6, 2019

Thanks for your answer.
I solved the problem with a my script on Javascript.
Thank you very much for your help.
Samuele

SSemicolon WebSTAFFMay 6, 2019

Hello,

Thank You so much for your Valuable Patience!

Would be great if you could post your Codes here as it might be useful for other users with the same issue.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Llelejuve4everMay 7, 2019

Good morning SemiColonWeb Team,
here mt code: 


var positioncurrent;
if(bowser.name == "Chrome" && bowser.osname == "Android")
    window.addEventListener("click", function(){

        $('#contactFormModal').on('shown.bs.modal', function () {
            if($(this).offset().top != 0)
                positioncurrent =  $(this).offset().top;
            $("html, body").animate({"scrollTop":   positioncurrent}, 1);

            $('html,body').css({
                overflow: 'hidden',
                height: '100%'
            });

        });

        $("#contactFormModal").on("hidden.bs.modal", function () {
            $("html, body").animate({"scrollTop":   positioncurrent}, 1);
            $('html,body').css({
                overflow: 'auto',
                height: 'auto'
            });
        });
    });

In my opinion it works fine.
Thanks & Regards,
Samuele

SSemicolon WebSTAFFMay 7, 2019

Hello,

Thank You so much for the Codes! We Really Appreciate you! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard