Web page height correctly rendered with WebViewRenderer, but not with ViewRenderer

Question

There is something different between the default WebViewRenderer and my custom ViewRenderer and I have to find out why. Basically, the web page isn't displayed if I use my custom ViewRenderer.

The ViewRenderer has some issues with height: 100%; and interprets this CSS wrong. As result the height is 0px, despite it should use the full height. On the other side it works with exact sizes (e.g. 400px).

Code for WebViewRenderer:

<local:CustomWebView x:Name="webView"
     Source="http://somesite"
     HorizontalOptions="FillAndExpand"
     VerticalOptions="FillAndExpand"
     HeightRequest="1000"
     WidthRequest="1000"/>

public class CustomWebView : WebView
{
}

public class CustomWebViewRenderer : WebViewRenderer
{
    public CustomWebViewRenderer(Context context) : base(context)
    {

    }
}

Code for ViewRenderer:

<local:HybridWebView x:Name="webView"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     HeightRequest="1000"
                     WidthRequest="1000"/>

public class HybridWebView : View
{
}

public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
{
    private Context context;

    public HybridWebViewRenderer(Context context) : base(context)
    {
        this.context = context;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            var webView = new Android.Webkit.WebView(this.context);
            webView.Settings.JavaScriptEnabled = true;
            webView.SetWebViewClient(new CustomWebViewClient());
            SetNativeControl(webView);
        }

        if (e.OldElement != null)
        {
        }

        if (e.NewElement != null)
        {
            Control.LoadUrl("http://somesite");
        }
    }
}

public class CustomWebViewClient : WebViewClient
{

}

One assumption is that the responsive website adapts to its WebView size, and since the rendering process takes place in background it somehow has a height of zero at this time.

@Gautam: To open the URL I make some web requests to get the correct login tokens (OAuth). Once I have my URL I show it in the `WebView`. Here it makes no difference if I use `http` or `https`. Tested on both - the device and emulator. — testing, Mar 21 '19 at 17:17
You can create a class inherit WebChromeClient, then replace of ` var webView = new Android.Webkit.WebView(this.context);` — Leon, Mar 22 '19 at 09:58
@LeonLu-MSFT: I already tried to use `webView.SetWebChromeClient(new CustomWebChromeClient(this.context));`, but nothing changes. Or do I have to add something? — testing, Mar 22 '19 at 11:37

score 1 · Accepted Answer · answered Mar 27 '19 at 10:22

1

I don't know why, but this solves the issue for me:

webView.LayoutParameters = new LinearLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);

If anyone has a clue, please comment.

answered Mar 27 '19 at 10:22

testing

19,681
50
236
417

Web page height correctly rendered with WebViewRenderer, but not with ViewRenderer

1 Answers1