Search code examples
blazorkeyboardmaui

MAUI Blazor App. Virtual keyboard covers textbox


I've started to create an app using Maui Blazor. When selecting a textbox (in my example the password field) the virtual keyboard pops up and covers the entry. Is there an automatic way to move the selected textbox back in to view when the virtual keyboard appears?

I have not tried anything because I don't know where to start and google hasn't helped.

enter image description here

enter image description here


Solution

  • You can try to set the Application.WindowSoftInputModeAdjust attached property to a value of the WindowSoftInputModeAdjust enumeration. It can resize the window when an input control has focus, to ensure the keyboard not covers the textbox. The code can be written in the App.xaml.cs file, you can refer to the following example:

    using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;
    using Application = Microsoft.Maui.Controls.Application;
    
    namespace BlazorProject;
    
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
    
            MainPage = new MainPage();
    
            Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
        }
    }
    

    For more details, you can refer to Soft keyboard input mode on Android