MAUI: Full content is not showing on the UI with Webview

Question

I am using WebView to show Html content on the UI. I want few customizations in the content like different color for headings and custom font for the entire data. So I used a custom webview like below:

DailyReadingAndroidWebView

public class DailyReadingAndroidWebView : WebView
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(
     propertyName: "Url",
     returnType: typeof(string),
     declaringType: typeof(DailyReadingAndroidWebView),
     defaultValue: default(string));

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }
}

DailyReadingAndroidRenderer

public class DailyReadingAndroidRenderer : WebViewRenderer
{
    public DailyReadingAndroidRenderer(Context context) : base(context)
    {
    }

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

        if (Control != null)
        {
            // Set default font size
            Control.Settings.DefaultFontSize = 25;
            Control.Settings.JavaScriptEnabled = true;

            // Make WebView background transparent via CSS; no need to force software layer
            Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
            // Removed: Control.SetLayerType(Android.Views.LayerType.Software, null);
            Control.Settings.SetSupportZoom(false);

            string makeTransparentScript = @"
            let style = document.createElement('style');
            style.innerHTML = `
                @font-face {
                    font-family: 'CustomFont';
                    src: url('file:///android_asset/Poppins-Light.ttf');
                }
                body {
                    background-color: transparent !important;
                    color: black !important;
                    font-family: 'CustomFont', sans-serif !important;
                }
                h4 {
                    color: #679E18 !important;
                }
            `;
            document.head.appendChild(style);
        ";

            Control.SetWebViewClient(new CustomWebViewClient(makeTransparentScript));
        }
    }

    private class CustomWebViewClient : WebViewClient
    {
        private readonly string _script;

        public CustomWebViewClient(string script)
        {
            _script = script;
        }

        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            base.OnPageFinished(view, url);
            view.EvaluateJavascript(_script, null);
        }
    }
}

XAML

XAML.CS

string htmldata = "First Reading - Adapted from Sir. 35:1-12
The person who keeps the law offers much to God; he who keeps the commandments makes a peace offering.  The one who returns a kindness offers fine flour; the person who gives to the poor makes an offering of thanks.  To keep away from wickedness is pleasing to the Lord, and to avoid injustice atones for sin.  Do not appear before the Lord empty-handed, for these things are to be done because of the commandment.

The offerings of a just man enrich the altar, and its pleasing odor rises before the Most High.  The sacrifice of a good man is acceptable, and it will not be forgotten.  Generously glorify the Lord, and do not hold back your gifts.  Give your gifts with gladness and a cheerful face.  Give to the Most High as he has given, as generously as you have received.  For the Lord is the one who repays, and he will repay you seven times more than you give.

Do not offer the Lord a bribe, for he will not accept it; and do not trust an unrighteous offering.  For the Lord is the judge, and he does not show favoritism.

Psalm 50:5-8, 14, 23
\"Gather to me my faithful ones,
who made a covenant with me by sacrifice!\"
The heavens declare his righteousness,
for God himself is judge!
\"Hear, O my people, and I will speak,
O Israel, I will testify against you.
I am God, your God.
I do not reprove you for your sacrifices;
your burnt offerings are continually before me.
Offer to God a sacrifice of thanksgiving,
and pay your vows to the Most High;
He who brings thanksgiving as his sacrifice honors me;
to him who orders his way aright
I will show the salvation of God!\"

Gospel - Adapted from Mark 10:28-31
Peter began to say to Jesus, \"We gave up everything and followed you.\" Jesus said, \"Truly, everyone who has given up a home, or brothers, or sisters, or mother, father, or children, or lands for my sake will receive a hundred times more in this world: houses and brothers and sisters and mothers and children and lands, along with sufferings; and they will receive everlasting life in the world to come.  But many people that are first will be last, and the last will be first.\"
";
string description = htmldata.Replace("'", "'").Replace("src=\"//player.vimeo.com/video", "src=\"https://player.vimeo.com/video");
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"");
mywebview.Source = htmlSource;

I am using WebView to show Html content on the UI. I want few customizations in the content like different color for headings and custom font for the entire data. So I used a custom webview like below:

DailyReadingAndroidWebView

public class DailyReadingAndroidWebView : WebView
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(
     propertyName: "Url",
     returnType: typeof(string),
     declaringType: typeof(DailyReadingAndroidWebView),
     defaultValue: default(string));

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }
}

DailyReadingAndroidRenderer

public class DailyReadingAndroidRenderer : WebViewRenderer
{
    public DailyReadingAndroidRenderer(Context context) : base(context)
    {
    }

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

        if (Control != null)
        {
            // Set default font size
            Control.Settings.DefaultFontSize = 25;
            Control.Settings.JavaScriptEnabled = true;

            // Make WebView background transparent via CSS; no need to force software layer
            Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
            // Removed: Control.SetLayerType(Android.Views.LayerType.Software, null);
            Control.Settings.SetSupportZoom(false);

            string makeTransparentScript = @"
            let style = document.createElement('style');
            style.innerHTML = `
                @font-face {
                    font-family: 'CustomFont';
                    src: url('file:///android_asset/Poppins-Light.ttf');
                }
                body {
                    background-color: transparent !important;
                    color: black !important;
                    font-family: 'CustomFont', sans-serif !important;
                }
                h4 {
                    color: #679E18 !important;
                }
            `;
            document.head.appendChild(style);
        ";

            Control.SetWebViewClient(new CustomWebViewClient(makeTransparentScript));
        }
    }

    private class CustomWebViewClient : WebViewClient
    {
        private readonly string _script;

        public CustomWebViewClient(string script)
        {
            _script = script;
        }

        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            base.OnPageFinished(view, url);
            view.EvaluateJavascript(_script, null);
        }
    }
}

XAML

XAML.CS

string htmldata = "First Reading - Adapted from Sir. 35:1-12
The person who keeps the law offers much to God; he who keeps the commandments makes a peace offering.  The one who returns a kindness offers fine flour; the person who gives to the poor makes an offering of thanks.  To keep away from wickedness is pleasing to the Lord, and to avoid injustice atones for sin.  Do not appear before the Lord empty-handed, for these things are to be done because of the commandment.

The offerings of a just man enrich the altar, and its pleasing odor rises before the Most High.  The sacrifice of a good man is acceptable, and it will not be forgotten.  Generously glorify the Lord, and do not hold back your gifts.  Give your gifts with gladness and a cheerful face.  Give to the Most High as he has given, as generously as you have received.  For the Lord is the one who repays, and he will repay you seven times more than you give.

Do not offer the Lord a bribe, for he will not accept it; and do not trust an unrighteous offering.  For the Lord is the judge, and he does not show favoritism.

Psalm 50:5-8, 14, 23
\"Gather to me my faithful ones,
who made a covenant with me by sacrifice!\"
The heavens declare his righteousness,
for God himself is judge!
\"Hear, O my people, and I will speak,
O Israel, I will testify against you.
I am God, your God.
I do not reprove you for your sacrifices;
your burnt offerings are continually before me.
Offer to God a sacrifice of thanksgiving,
and pay your vows to the Most High;
He who brings thanksgiving as his sacrifice honors me;
to him who orders his way aright
I will show the salvation of God!\"

Gospel - Adapted from Mark 10:28-31
Peter began to say to Jesus, \"We gave up everything and followed you.\" Jesus said, \"Truly, everyone who has given up a home, or brothers, or sisters, or mother, father, or children, or lands for my sake will receive a hundred times more in this world: houses and brothers and sisters and mothers and children and lands, along with sufferings; and they will receive everlasting life in the world to come.  But many people that are first will be last, and the last will be first.\"
";
string description = htmldata.Replace("'", "'").Replace("src=\"//player.vimeo.com/video", "src=\"https://player.vimeo.com/video");
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"");
mywebview.Source = htmlSource;

My problem is html content is not full showing on the UI.

More Details about the other controls in the UI:

I have a audio section and a footer image on bottom of the webview. Also I need to show the webview contents with a background image. Below is the complete UI.

Screenshot

As you can see in the screenshot, the last sentence is Give to the Most High as he has given, as generously as you have received. After that also there is a lot of contents.

I have created a demo project to replicate this issue. The demo has only dummy data and it is uploaded here.

Share via

MAUI: Full content is not showing on the UI with Webview

Your answer