CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.ios
Anand
Anand

Reputation: 1959

Webview text field gets scrolled to top when trying to focus - Xamarin.forms iOS

I have xamarin forms iOS app contains a webview. The webview load a html page contains some text fields.The problem I am facing is whenever we click on the text field,the keyboard shows and the entire web page will scroll to top and the text field will become invisible.When we open the same page on a browser it works fine. I have used xam.plugins.forms.keyboard overlap for my other non webview pages. How can I fix this issue? I want the textview field should be there when we focus it .

I have seen this similar problem on this question. But it didn't solved my issue. Any help is appreciated.

My XAML

 <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <WebView x:Name="Webview"  
             HeightRequest="1000"  
             WidthRequest="1000"  
             IsVisible="False"
             Navigating="OnNavigating"  
             Navigated="OnNavigated"  
             VerticalOptions="FillAndExpand"/>
        </Grid>
    </ContentPage.Content>

Upvotes: 1

Views: 631

Answers (1)

nevermore
nevermore

Reputation: 15816

You can remove the plugin and implement it by yourself.

For example, you can check the source code and copy it to your project as a PageRenderer.

In the page renderer, I add a bool value to check whether you need to use this renderer or not. Here I use the ClassId to check:

bool useThisRenderer;

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
    base.OnElementChanged(e);

    if (e.NewElement != null)
    {
        Page p = e.NewElement as Page;

        if (p.ClassId == "0")
        {
            useThisRenderer = false;
        }
        else
        {
            useThisRenderer = true;
        }
    }
    
}

public override void ViewWillAppear(bool animated)
{
    base.ViewWillAppear(animated);

    if (useThisRenderer)
    {
        var page = Element as ContentPage;

        if (page != null)
        {
            var contentScrollView = page.Content as ScrollView;

            if (contentScrollView != null)
                return;

            RegisterForKeyboardNotifications();
        }
    }
}

public override void ViewWillDisappear(bool animated)
{
    base.ViewWillDisappear(animated);

    if (useThisRenderer)
    {
        UnregisterForKeyboardNotifications();
    }
}

Then in your Xamarin.forms project, if one of your content page does not need this renderer(for example the current page you have a webview), you can set the classid = "0" to avoid this:

public MainPage()
{
    InitializeComponent();

    this.ClassId = "0";
}

If you need this renderer, then do nothing about this.ClassId.

I upload a sample project here and feel free to ask me any question.

Upvotes: 1

Related Questions