maui

maui copied to clipboard

Description

Maui scrollview not scrolling with open keyboard when the content can fits in screen, but scrolls when the content owerflows

Steps to Reproduce

Not working:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ScrollViewDemos" x:Class="ScrollViewDemos.Views.XAML.ColorListPage" Title="ScrollView demo">
    
    <ScrollView>
        <StackLayout Margin="10">

            <Label Text="Login" FontSize="Title" FontAttributes="Bold" Margin="0,0,0,20" />

            <Label FontSize="Large">Username</Label>
            <Frame CornerRadius="10" Padding="3" Margin="0,0,0,20">
                <Entry FontSize="Large" Margin="5,0,0,0" Placeholder="Username"/>
            </Frame>

            <Label FontSize="Large">Password</Label>
            <Frame CornerRadius="10" Padding="3" Margin="0,0,0,20">
                <Entry FontSize="Large" Margin="5,0,0,0" Placeholder="Password" IsPassword="True" />
            </Frame>

            <Button FontSize="Large" VerticalOptions="Center" Text="Login" Margin="0,0,0,0"/>

        </StackLayout>
    </ScrollView>
</ContentPage>

Workaround:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ScrollViewDemos" x:Class="ScrollViewDemos.Views.XAML.ColorListPage" Title="ScrollView demo">
    
    <ScrollView>
        <StackLayout Margin="10">

            <Label Text="Login" FontSize="Title" FontAttributes="Bold" Margin="0,0,0,20" />

            <Label FontSize="Large">Username</Label>
            <Frame CornerRadius="10" Padding="3" Margin="0,0,0,20">
                <Entry FontSize="Large" Margin="5,0,0,0" Placeholder="Username"/>
            </Frame>

            <Label FontSize="Large">Password</Label>
            <Frame CornerRadius="10" Padding="3" Margin="0,0,0,20">
                <Entry FontSize="Large" Margin="5,0,0,0" Placeholder="Password" IsPassword="True" />
            </Frame>

            <Button FontSize="Large" VerticalOptions="Center" Text="Login" Margin="0,0,0,500"/>

        </StackLayout>
    </ScrollView>
</ContentPage>

Diffrence in Button margin:

<Button FontSize="Large" VerticalOptions="Center" Text="Login" Margin="0,0,0,0"/> <Button FontSize="Large" VerticalOptions="Center" Text="Login" Margin="0,0,0,500"/>

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure

Last version that worked well

6.0

Affected platforms

Android

Affected platform versions

Android 13

Did you find any workaround?

Add bottom margin to the last element in the page to overflow the screen

Relevant log output

No response

If you modify this property does it work like you expect/want it to?

This property was broken for some time in NET6.0 so what you might be hitting is the fact that we fixed it. https://learn.microsoft.com/en-us/dotnet/maui/android/platform-specifics/soft-keyboard-input-mode?view=net-maui-8.0

Hi @w3ori. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

If you modify this property does it work like you expect/want it to?

This property was broken for some time in NET6.0 so what you might be hitting is the fact that we fixed it.

https://learn.microsoft.com/en-us/dotnet/maui/android/platform-specifics/soft-keyboard-input-mode?view=net-maui-8.0

Thanks for your answer!

It worked perfectly for me before (.NET MAUI 6), but I had to upgrade to .NET MAUI 8 because of the support cycle, but I faced more bugs then before.

I can try this workaround on the next week and I will post the result.

@PureWeen Thank you for this solution. Works perfectly. Can I ask, why isn't it default in MAUI? It is very useful and works like it should in default.

I pasted the App.Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>).UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize); line into the App.xaml.cs file. Where is the best place for that?

Thanks for your answer!

If you modify this property does it work like you expect/want it to? https://learn.microsoft.com/en-us/dotnet/maui/android/platform-specifics/soft-keyboard-input-mode?view=net-maui-8.0

I can't understand why this keeps being put forward as a fix. It only fixes the problem in Android, and even then it doesn't do a good job at it.

This problem is still happening in .NET 8 on iOS.

Can you attach a video of your initial issue? I don't quite follow what you're saying is broken or should be the default in this issue.

When I run your XAML the UI is all at the top of the screen and never overflows so it never needs to scroll. If I open the keyboard the content still doesn't overflow so there's no need for scrollbars.

Hi @w3ori. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

Hello,

1. Create a new MAUI project
2. Add an Entry to the bottom
3. Open an Entry and try to scroll, it is not working
4. Add this line and it's working: App.Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>).UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize)

It should work in default in my opinion.

Verified this issue with Visual Studio 17.10.0 Preview 3 (8.0.20 & 8.0.0-rc.2.9530). Can repro this issue on android platform.

I created a sample repo: https://github.com/w3ori/MauiAppScrollviewSample

Reproduction steps:

1. Tap / Click in username entry
2. Try to scroll down to the Login button (it's not working)