Xamarin Webview With Form Scrolls Out Of View When Clicking Textbox

Using a webview to load a simple html form, the form displays ok. When clicking an input field the entire form disappears showing arrows up and down and done button at bottom part

Solution 1:

Odd, so I made a web page using your HTML code, and then created a new Xamarin.Forms solution with a WebView pointing to the page I created from your HTML. When I clicked any of the input fields the soft keyboard showed as expected. However if I made sure the WebView was at the bottom of the screen, under where the keyboard shows, the keyboard does hide the WebView. To fix this, you would need a custom page renderer [1] to scroll the view up when the keyboard shows up and scroll the view back down when the keyboard goes away.

Here is some sample code to do this. I assume you would only want to do this on pages that have that WebView, so first in the Forms PCL project create an empty subclass of ContentPage called WebViewContentPage:

publicclassWebViewContentPage : ContentPage {}

Then you inherit from the WebViewContentPage for the actual page that has the WebView, in my test I called it TestWebInputPage:

publicpartialclassTestWebInputPage : WebViewContentPage
{ 
    publicTestWebInputPage()
    {
        InitializeComponent();
    }
}

My Xaml is (change UrlToWebPageHere to the actual url of your web page):

<?xml version="1.0" encoding="utf-8"?><local:WebViewContentPagexmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:TestWebInput"x:Class="TestWebInput.TestWebInputPage"><StackLayout><LabelText="Take up space"HeightRequest="400" /><WebViewx:Name="webView"Navigating="Handle_Navigating"Source="UrlToWebPageHere"VerticalOptions="FillAndExpand" /></StackLayout></local:WebViewContentPage>

And finally the custom page renderer code. This goes in the iOS app project:

using System;
using Xamarin.Forms;
using TestWebInput.iOS;
using Xamarin.Forms.Platform.iOS;
using Foundation;
using UIKit;
using TestWebInput;

[assembly: ExportRenderer(typeof(WebViewContentPage), typeof(ContentPageRenderer))]
namespaceTestWebInput.iOS
{
    publicclassContentPageRenderer : PageRenderer
    {   
        private NSObject keyBoardWillShow;
        private NSObject keyBoardWillHide;
        private nfloat scrollAmout;
        privatedouble animDuration;
        private UIViewAnimationCurve animCurve;
        privatebool keyboardShowing;

        publicoverridevoidViewDidLoad()
        {

            base.ViewDidLoad();

            keyBoardWillShow = UIKeyboard.Notifications.ObserveWillShow(KeyboardWillShow);

            keyBoardWillHide = UIKeyboard.Notifications.ObserveWillHide(KeyboardWillHide);
        }

        voidKeyboardWillShow(object sender, UIKeyboardEventArgs args)
        {
            if (!keyboardShowing)
            {
                keyboardShowing = true;
                animDuration = args.AnimationDuration;
                animCurve = args.AnimationCurve;

                var r = UIKeyboard.FrameBeginFromNotification(args.Notification);
                scrollAmout = r.Height;
                ScrollTheView(true);
            }
        }

        voidKeyboardWillHide(object sender, UIKeyboardEventArgs args)
        {
            if (keyboardShowing)
            {
                keyboardShowing = false;
                animDuration = args.AnimationDuration;
                animCurve = args.AnimationCurve;

                var r = UIKeyboard.FrameBeginFromNotification(args.Notification);
                scrollAmout = r.Height;
                ScrollTheView(false);
            }
        }

        privatevoidScrollTheView(bool scale)
        {
            UIView.BeginAnimations(string.Empty, IntPtr.Zero);
            UIView.SetAnimationDuration(animDuration);
            UIView.SetAnimationCurve(animCurve);

            var frame = View.Frame;

            if (scale)
                frame.Y -= scrollAmout;
            else
                frame.Y += scrollAmout;
            View.Frame = frame;
            UIView.CommitAnimations();
        }
    }
}

Since this renderer actually scrolls the entire native page up and back down when the keyboard shows and hides, it should not matter how you layout the page in the Forms Xaml. All that matters is that your Forms page inherits from WebViewContentPage.

I hope this helps!

[1] https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/contentpage/