Popup is not Scrolling in .Net MAUI on Android

Question

I am using .NET 7 MAUI with MAUI Community toolkit. I am displaying a popup on button click, on windows that popup is scrolling but on android it is not scrolling. I am sharing the code where the problem is?

Here is my button which is opening the popup.

 <ScrollView Orientation="Both">
         <VerticalStackLayout>
             <Button
                 Margin="10"
                 Padding="10"
                 Command="{Binding NewBuyFormDisplayCommand}"
                 Text="Add New Buy Record" />
         </VerticalStackLayout>
</ScrollView >

Here is the ViewModel Code

[RelayCommand]
public async Task NewBuyFormDisplay()
{
    await ResetForm();
    addBuyPage = new AddBuyPage(this);
    await Shell.Current.ShowPopupAsync(addBuyPage);
}

Here is the Popup XAML

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
    x:Class="MAUIAPP_BigHop87.Views.AddBuyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:vm="clr-namespace:MAUIAPP_BigHop87.ViewModels"
    x:DataType="vm:BuyViewModel">
    <ScrollView Orientation="Both" VerticalOptions="FillAndExpand">
        <StackLayout
            Padding="20"
            HorizontalOptions="FillAndExpand"
            Spacing="0"
            WidthRequest="300">
            <Label FontSize="Header" Text="Add a New Buy Record" />
            <Frame MinimumWidthRequest="400">
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="No" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry
                        IsReadOnly="True"
                        Text="{Binding DateId}"
                        TextColor="{AppThemeBinding Dark=White,
                                                    Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Vendor" />
                    <Picker
                        Title="Select Your Vendor"
                        ItemsSource="{Binding VendorsList}"
                        SelectedIndex="0"
                        SelectedItem="{Binding VendorName}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Customer" />
                    <Picker
                        Title="Select Your Customer"
                        ItemsSource="{Binding CustomersList}"
                        SelectedIndex="0"
                        SelectedItem="{Binding CustomerName}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Item Name" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding ItemName}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Length" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Length}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Width" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Width}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Height" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Height}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Flut Type" />
                    <Picker
                        Title="Select Your Flut Type"
                        ItemsSource="{Binding FlutTypes}"
                        SelectedIndex="0"
                        SelectedItem="{Binding FlutType}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Layer Type" />
                    <Picker
                        Title="Select Your Layer Type"
                        ItemsSource="{Binding LayerTypes}"
                        SelectedIndex="0"
                        SelectedItem="{Binding Layer}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Price" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Price}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Delivery Date" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <DatePicker Date="{Binding DeliveryDate}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Status" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Switch IsToggled="{Binding Status}" OnColor="Blue" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Note" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Note}" />
                </StackLayout>
            </Frame>
            <HorizontalStackLayout Padding="10" Spacing="10">
                <Button
                    Margin="10"
                    Padding="10"
                    Command="{Binding CancelCommand}"
                    Text="Cancel" />
                <Button
                    Margin="10"
                    Padding="10"
                    Command="{Binding SaveBuyCommand}"
                    CommandParameter="{Binding .}"
                    Text="Add" />
            </HorizontalStackLayout>
        </StackLayout>
    </ScrollView>
</toolkit:Popup>

I have tried setting VerticalOptions HorizontalAndExpand of scroll view also i tried setting Height of scroll view but the problem remains same.

Answer 1

I created a new project with your code and reproduce your problem. But if I delete the Orientation="Both" in the scrollview, it can scroll vertically.

In addition, this is a known issue on the github: The ScrollView Orientation="Both" is not working properly. You can follow it.

For a workaround, you can remove the Orientation="Both" and the WidthRequest="300".