Blank space is showing after webview when loading new content in MAUI

Question

Blank space is showing after webview when loading new content in MAUI

Sreejith Sreenivasan 1,001

I want to create a UI with a Label(title), image(saint image) and a webview(to show HTMl content). When scroll I want to scroll the entire item, not the webview contents only. After all these I need a section to show the audio player with previous, next and play options. So I created a UI like below:

<!-- Android view -->
<Frame 
    Padding="5"
    CornerRadius="20"
    Margin="0,10,0,0" 
    Grid.Row="1" 
    x:Name="android_webview_frame" 
    BackgroundColor="#0091DA"
    IsVisible="False">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ScrollView
            x:Name="android_scroll_view"
            Grid.Row="0"
            Orientation="Vertical"
            VerticalOptions="FillAndExpand">

            <VerticalStackLayout
                Grid.Row="0"
                Padding="5"
                Spacing="10"
                VerticalOptions="FillAndExpand"
                BackgroundColor="#0091DA">

                <Label
                    <!-- Title label -->
                </Label>

                <!-- Saint image -->
                <Grid 
                    IsVisible="False"
                    x:Name="image_layout">
                    <!-- Saint Image with name on top of saint-->
                    
                </Grid>

                <!-- Main content -->
                <WebView 
                    x:Name="android_webview"
                    BackgroundColor="#0091DA"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                </WebView>
            </VerticalStackLayout>
        </ScrollView>

        <!-- Audio border -->
        <Border
            x:Name="android_audio_border"
            Grid.Row="1"
            BackgroundColor="#014F78"
            StrokeThickness="0"
            Padding="0"
            Margin="15"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="EndAndExpand">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="30"/>
            </Border.StrokeShape>
        </Border>
    </Grid>
</Frame>

Expected UI:

Capture

Everything is working as expected when loading content initially. My problem is When loading a different day's data, there is blank space on the bottom of the webview.

Below is the logic to show content on webview: I set a custom font and white text color for the webview contents.

string description = Details.description;
// Define custom CSS to set font and text color
string htmlContent = $@"
    <html>
    <head>
        <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
        <style>
            @font-face {{
                font-family: 'Poppins';
                src: url('file:///android_asset/fonts/Poppins-Regular.ttf'); /* For Android */
            }}
            body {{
                background-color: #0091DA; /* Match WebView background */
                color: white; /* Set text color */
                font-family: 'Poppins', sans-serif;
                padding: 10px;
                font-size: 20px; /* Increase font size */
                line-height: 1.6; /* Improve readability */
            }}
            h4, h5, p {{
                color: white;
            }}
        </style>
    </head>
    <body>
        {description}
    </body>
    </html>";

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = htmlContent;
android_webview.Source = htmlSource;

Please watch this video for a clear understanding.

I try adding a Navigated event for webview but when adding that the content is not visible on the UI. Please suggest a solution to remove the empty space after webview when loading new data.

Sreejith Sreenivasan 1,001 Reputation points

2025-03-17T05:49:40.9266667+00:00

Update:

I have created a demo, could you please check with that? https://drive.google.com/file/d/12L6zRcmDev8ZWcL3L7PdAKW7vOG8VLTu/view?usp=sharing

I can't completely recreate the issue in the demo. When loading data initially there is no space at the bottom. To refresh choose calendar option and choose any data. If you refresh couple of times, you can see blank space at the bottom. Anyone please help me to resolve it today itself, since today is the last date of the deadline of this project.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 81,191 Reputation points Microsoft External Staff

2025-03-17T07:40:09.89+00:00

This issue is related to the html content changed, but the webview's height do not adjust by the html content. Right?
Sreejith Sreenivasan 1,001 Reputation points

2025-03-17T08:07:33.52+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Yes, but here I am not using Navigated event.
Sreejith Sreenivasan 1,001 Reputation points

2025-03-18T04:34:03.1533333+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) Any solution?

Accepted answer

0 additional answers

Your answer

Sreejith Sreenivasan 1,001 Reputation points

2025-03-17T05:49:40.9266667+00:00

Update:

I have created a demo, could you please check with that? https://drive.google.com/file/d/12L6zRcmDev8ZWcL3L7PdAKW7vOG8VLTu/view?usp=sharing

I can't completely recreate the issue in the demo. When loading data initially there is no space at the bottom. To refresh choose calendar option and choose any data. If you refresh couple of times, you can see blank space at the bottom. Anyone please help me to resolve it today itself, since today is the last date of the deadline of this project.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 81,191 Reputation points Microsoft External Staff

2025-03-17T07:40:09.89+00:00

This issue is related to the html content changed, but the webview's height do not adjust by the html content. Right?
Sreejith Sreenivasan 1,001 Reputation points

2025-03-17T08:07:33.52+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Yes, but here I am not using Navigated event.
Sreejith Sreenivasan 1,001 Reputation points

2025-03-18T04:34:03.1533333+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) Any solution?

Answer 1

Hello,

You can using Handler to customize the WebView. You may refer to Customize controls with handlers.

And implement it in code behind,

public DailySaintPage()
    {
        InitializeComponent();
        ModifyWebView();
        ...
        CallDailySaint(data);
    }


    void ModifyWebView()
    {
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if ANDROID
            if (handler.PlatformView is global::Android.Webkit.WebView platformWebView)
            {
                platformWebView.SetWebViewClient(new CustomWebViewClient(this.android_webview));
            }
#endif
        });
    }

And here is the code for CustomWebViewClient class,


#if ANDROID
public class CustomWebViewClient : WebViewClient
{

    Microsoft.Maui.Controls.WebView mywebview;
    public CustomWebViewClient(Microsoft.Maui.Controls.WebView webView)
    {
        
        mywebview = webView;
    }

    public async override void OnPageFinished(Android.Webkit.WebView view, string url)
    {
        mywebview.HeightRequest = 0;
        await Task.Delay(500); // Allow time for content to load

        string js = "document.body.scrollHeight";
        var height = await mywebview.EvaluateJavaScriptAsync(js);

        if (double.TryParse(height, out double newHeight) && newHeight > 0)
        {
            mywebview.HeightRequest = newHeight;  // Set WebView height dynamically
        }

        base.OnPageFinished(view, url);


    }

}
#endif

And you don't need custom renderer any more.

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Sreejith Sreenivasan 1,001 Reputation points

2025-03-18T11:52:48.0966667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) I resolved this issue from the SO thread, can you update it as your answer.

https://stackoverflow.com/questions/79512363/blank-space-is-showing-after-webview-when-loading-new-content-in-maui
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 81,191 Reputation points Microsoft External Staff

2025-03-19T00:50:39.3733333+00:00

Sreejith Sreenivasan Done, thanks for your update.

Share via

Blank space is showing after webview when loading new content in MAUI

0 additional answers

Your answer