My WebView inside ScrollView being cropped

Question

Is there a way to set a WebView height to auto(fit content)? My XAML Code:

        <ScrollView VerticalScrollBarVisibility="Default" HorizontalScrollBarVisibility="Never" BackgroundColor="Red">
            <Grid BackgroundColor="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <StackLayout Spacing="0">
                    <Image Source="https://streettraining.hu/uploads/slider/street-training-balaton-2020.jpg" HorizontalOptions="FillAndExpand" Margin="0"/>
                    <Grid BackgroundColor="#dcdde1" Margin="0" Padding="0,20,0,20">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center">
<!--My header -->
                        </StackLayout>
                <local:AutoHeightWebView Grid.Row="1" x:Name="webView" Margin="0,20,0,0" VerticalOptions="FillAndExpand" IsEnabled="False" Source="{Binding Leiras}"/>
                <Grid Grid.Row="2" Margin="0,20,0,0" BackgroundColor="#dcdde1" Padding="20">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Label Text="Programs"/>
                    <Grid x:Name="NapInditStack" BackgroundColor="White" Padding="20" Grid.Row="1">
                        <local:AutoHeightWebView x:Name="NapInditWebView" Source="{Binding NapIndit}" IsEnabled="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                    </Grid>
                </Grid>
            </Grid>
        </ScrollView>

I tried this renderer on android:

public class AutoHeightWebViewRenderer : WebViewRenderer
    {
        static AutoHeightWebView _xwebView = null;

        public AutoHeightWebViewRenderer(Android.Content.Context context) : base(context)
        {
        }

        class DynamicSizeWebViewClient : WebViewClient
        {
            public async override void OnPageFinished(Android.Webkit.WebView view, string url)
            {
                try
                {
                    if (_xwebView != null)
                    {
                        view.Settings.JavaScriptEnabled = true;
                        view.Settings.DomStorageEnabled = true;
                        _xwebView.HeightRequest = 0d;

                        await Task.Delay(500);

                        string result = await _xwebView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                        _xwebView.HeightRequest = Convert.ToDouble(result);
                    }
                    base.OnPageFinished(view, url);
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"{ex.Message}");
                }
            }
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            _xwebView = e.NewElement as AutoHeightWebView;

            if (e.OldElement == null)
            {
                Control.SetWebViewClient(new DynamicSizeWebViewClient());
            }
        }
    }

IOS:

    public class AutoHeightWebViewRenderer : WkWebViewRenderer
    {
        public bool added = false;
        protected override async void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            var webView = e.NewElement as WebView;
            if (webView != null)
            {
                
                webView.HeightRequest = 0d;
                await Task.Delay(1000);
                var x = await webView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                webView.HeightRequest = Convert.ToDouble(x);
            }
        }
    }

First Webview on android works perfect, but on IOS I have a very big white space.
Android:
IOS:

Second WebView, on Android I see this: The red background is the main Scrollview's background
I see the whole webview in iOS, but there is a same white space(but different size)
Html codes: First:

<html><head><link rel=\"stylesheet\" href=\"https://streettraining.hu/design/style_web0431.css\"><meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'/></head><body>
<div class=\"wrapper\"><h4 class=\"savkiscim\">Ilyen témákra és élményekre számíthatsz:</h4><div class=\"cimkebox\"><p><span class=\"k1\"> asszertív viselkedés</span>, beszélgetés, beszélgetésvezetés, <span class=\"k3\">egymás megértése</span>, erőforrás feltárás, erősségeim, érzelmi intelligencia, <span class=\"k1\">fejlődés</span>, gyakorlás, intuíció, jelen, jövő, karrierút, kommunikáció, korlátainkat átlépni, közösségépítés, lámpaláz, learning by doing, <span class=\"k2\">megértetni magamat</span>, megoldáskeresés, <span class=\"k5\">önismeret</span>, önmenedzselés, panaszkodás, saját igényeimet képviselni, saját út, stresszcsökkentés, támogató vezetés, tanulás, társak, <span class=\"k4\">tudatosság</span>, <span class=\"k3\">változás</span>, visszajelzés</p></div></div>
</body></html>

Second:

<html><head><link rel=\"stylesheet\" href=\"https://streettraining.hu/design/style_web0431.css\"><meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'/></head><body>
<h1>Napindítás</h1><p>Közös virtuális nyitás FB live, illetve ZOOM-on.<br><br>Kedves Résztvevőnk! A Grand Opening-re, vagyis a Street Training Online (STO) Napindításra egy közös ZOOM szobában várunk itt:<br><br>Topic: STO_Napindítás<br>Join Zoom Meeting<br>https://us02web.zoom.us/j/83673948809?pwd=SDliK3ZZZUt6V0FDMDNKaE9POC9jdz09<br><br>Meeting ID: 836 7394 8809<br>Passcode: 842607<br><br>Érkezz meg 9.25-re, hogy együtt kezdhessünk!<br>Ugyanekkor a Street Training Online 2021 facebook eseménynél indítunk majd egy live bejelentkezést is, figyeld az oldalt!<br><br>One tap mobile<br>+3617010488,,83673948809#,,,,*842607# Hungary<br>+3617799126,,83673948809#,,,,*842607# Hungary<br>Dial by your location<br>       +36 1 701 0488 Hungary<br>        +36 1 779 9126 Hungary<br>        +36 1 408 8456 Hungary<br>Meeting ID: 836 7394 8809<br>Passcode: 842607<br>Find your local number: https://us02web.zoom.us/u/kc4GXRFLkv<br><br></p>
</body></html>

Adrain · Accepted Answer · 2021-06-29 03:45:21Z

2

I recommend you use RelativeLayout to display the Webview, It will allow UIs to be created that scale proportionally across device sizes. For more information, you can find what you need in the link below: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relativelayout

answered Jun 29, 2021 at 3:45

Adrain

1,9441 gold badge5 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr. Fullop · Accepted Answer · 2021-06-29 13:16:39Z

I found the answer. This is a XF android BUG.

But we can outplay, when we Wrap the ScrollView in a ContentView. (We don't need RelativeLayout to display the Webview)

Code:

       <ContentView>
       <ScrollView VerticalScrollBarVisibility="Default" HorizontalScrollBarVisibility="Never" BackgroundColor="Red">
            <Grid BackgroundColor="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
             <local:AutoHeightWebView Grid.Row="1" x:Name="webView" Margin="0,20,0,0" VerticalOptions="FillAndExpand" IsEnabled="False" Source="{Binding Leiras}"/>
             <local:AutoHeightWebView x:Name="NapInditWebView" Source="{Binding NapIndit}" IsEnabled="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
        </Grid>
    </ScrollView>
    </ContentView>

And in IOS renderer change this:

webView.HeightRequest = Convert.ToDouble(x);

To this:

webView.HeightRequest = Convert.ToDouble(x) * 0.365;

I found the answer here

Collectives™ on Stack Overflow

My WebView inside ScrollView being cropped

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related