Problem with WebView keyboard overlap in .NET MAUI Android

Question

I’m developing a chat application using .NET MAUI. On Android I load the chat UI inside a WebView.

The chat works fine in a normal mobile browser (Chrome): when the user taps the message input, the keyboard appears and the input moves up correctly so it stays visible.

However, inside the MAUI WebView the behavior is different:

When the keyboard opens, the input gets pushed too far up leaving a large empty space, or

The keyboard overlaps the input, making it impossible to see what the user is typing.

So the layout handling with the soft keyboard is not matching the behavior of Chrome.

What I need to achieve

I want the WebView to resize or adjust like a normal browser so the input stays just above the keyboard.

Questions

Is there a recommended way in .NET MAUI to handle the Android soft keyboard with WebView?

Should this be fixed on the MAUI side (windowSoftInputMode / platform-specific code) or via CSS/JavaScript inside the page?

1. How can I properly inject JavaScript into the MAUI WebView to handle viewport/keyboard resizing?I’m developing a chat application using .NET MAUI. On Android I load the chat UI inside a WebView. The chat works fine in a normal mobile browser (Chrome):
   when the user taps the message input, the keyboard appears and the input moves up correctly so it stays visible. However, inside the MAUI WebView the behavior is different:
   • When the keyboard opens, the input gets pushed too far up leaving a large empty space, or
   • The keyboard overlaps the input, making it impossible to see what the user is typing.
   So the layout handling with the soft keyboard is not matching the behavior of Chrome.

   What I need to achieve

   I want the WebView to resize or adjust like a normal browser so the input stays just above the keyboard.

   Questions

   1. Is there a recommended way in .NET MAUI to handle the Android soft keyboard with WebView?
   2. Should this be fixed on the MAUI side (windowSoftInputMode / platform-specific code) or via CSS/JavaScript inside the page?
   3. How can I properly inject JavaScript into the MAUI WebView to handle viewport/keyboard resizing?

Answer 1

Hi @EL CARU Caruso ,

Thanks for reaching out.

From the log you shared, this is happening because MAUI webview is not a real chrome tab, it’s a web page sitting inside your app, and Android doesn’t always “make room” for the keyboard the way Chrome does.

a. Is there a recommended way in .NET MAUI to handle the Android soft keyboard with WebView?

You may refer to this way below:

This is the basic setting that stops the keyboard from sitting on top of your WebView.

In MAUI, this is the AdjustResize setting.

public App()

  {

  InitializeComponent();

  MainPage = new MainPage();

  Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);

    }

b. Should this be fixed on the MAUI side (windowSoftInputMode / platform-specific code) or via CSS/JavaScript inside the page?

I would recommend doing these:

• Fixed on the MAUI side is the baseline. It prevents the keyboard from simply overlapping the WebView.
• Via Css/JS inside the page is what prevents the “jump too far / huge empty space” problem. A lot of chat layouts use things like height: 100vh or fixed bottom bars, and those don’t always behave well inside an embedded WebView when the viewport height changes. So set AdjustResize first, then fine-tune the chat page with CSS/Js so the input stays sitting nicely just above the keyboard.

c. How can I properly inject JavaScript into the MAUI WebView to handle viewport/keyboard resizing?

In .NET MAUI, you can inject JavaScript into a WebView using the EvaluateJavaScriptAsync method (for one-way execution).

Ex: WebView using the EvaluateJavaScriptAsync method

using Microsoft.Maui.Controls;

webView.Navigated += async (_, __) =>

{

    var js = @"

    (function () {

    if (window.__kbFix) return; window.__kbFix = true;

    function pad() {

        var full = window.innerHeight;

        var vv = window.visualViewport ? window.visualViewport.height : full;

        var kb = Math.max(0, full - vv);

        document.body.style.paddingBottom = kb + 'px';

    }

    document.addEventListener('focusin', function () {

        setTimeout(function () {

        var el = document.activeElement;

        if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) {

          el.scrollIntoView({ block: 'center' });

        }

        pad();

        }, 50);

    });

    if (window.visualViewport) window.visualViewport.addEventListener('resize', pad);

    window.addEventListener('resize', pad);

    pad();

    })();";

    await webView.EvaluateJavaScriptAsync(js);

};

Hope this helps! If my answer was helpful - kindly follow the instructions here so others with the same problem can benefit as well. Thanks for your time.

Answer 2

To handle the soft keyboard behavior in a .NET MAUI WebView on Android, you can consider the following approaches:

1. WindowSoftInputModeAdjust: You can set the WindowSoftInputModeAdjust property to control how the WebView behaves when the soft keyboard is displayed. You may want to use WindowSoftInputModeAdjust.Resize to ensure that the WebView resizes and the input field is not obscured by the keyboard. This can be done in your MAUI application using the following code:

      using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;
      
      App.Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
   

   This setting should help in adjusting the layout when the keyboard appears.
2. CSS/JavaScript Adjustments: You might also want to implement some JavaScript within your WebView content to adjust the viewport when the keyboard is shown. You can inject JavaScript to handle resizing or repositioning of elements when the keyboard is active. For instance, you can listen for focus events on your input fields and adjust the scroll position accordingly.
3. Injecting JavaScript: To inject JavaScript into the MAUI WebView, you can use the EvaluateJavaScriptAsync method. Here’s a simple example:

      var webView = new WebView();
      await webView.EvaluateJavaScriptAsync("document.body.style.paddingBottom = '300px';");
   

   You can adjust the padding or other styles dynamically based on the keyboard's visibility.

By combining these two approaches, you should be able to achieve the desired behavior where the input field remains visible above the keyboard, similar to how it works in a standard mobile browser like Chrome.