question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[iOS] Content goes out of screen bounds while using modal

See original GitHub issue

Description

On iOS, my modal pages expands outside of the layout bounds of the screen. Also, if entering the last Entry the keyboard overlapps the content => https://github.com/dotnet/maui/issues/10978#issuecomment-1295724434

Here is an example of how the pages are structured.

<?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"
             x:Class="ReproScrollingIssueModal.Views.Modals.NewModalPage"
             Title="NewModalPage"
             
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"  
             ios:Page.ModalPresentationStyle="FormSheet"
             Shell.PresentationMode="ModalAnimated"
             >
    <Grid
        RowDefinitions="Auto,*,Auto"
        BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}"
        >
        <VerticalStackLayout
            HeightRequest="80"
            >
            <Label
                Text="Headline"
                />
            <BoxView />
        </VerticalStackLayout>

        <ScrollView
            Grid.Row="1"
            >
            <VerticalStackLayout
                Padding="4"
                Margin="12"
                >
                <Label 
                    Text="First entry form"
                    VerticalOptions="Center" 
                    HorizontalOptions="Center" 
                    />

                <Grid
                    ColumnDefinitions="50,*"
                    >
                    <Label
                        Text="#1"
                        />
                    <Entry
                        Grid.Column="1"
                        Margin="4,8"/>
                </Grid>
                
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Entry Margin="4,8"/>
                <Label 
                    Text="Last entry form"
                    VerticalOptions="Center" 
                    HorizontalOptions="Center" 
                    />
                <Entry Margin="4,8"/>

            </VerticalStackLayout>
        </ScrollView>

        <VerticalStackLayout
            Grid.Row="2"
            BackgroundColor="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}"
            >
            <BoxView />
            <Button
                Margin="20,12,20,12"
                Text="Save"
                />
        </VerticalStackLayout>
    </Grid>
</ContentPage>

If the content in the ScrollView gets too much, the result looks like that.

image

And this if the content of the ScrollView is reduced.

image

Steps to Reproduce

  1. Take the Repro provided
  2. Run the app on iOS (I’m using the latest VS 2022 Preview Version, net7 and XCode 14.1)
  3. Click the “Open modal” button
  4. Uncomment the Entrys in the NewModalPage and run the app again.

Link to public reproduction project repository

https://github.com/AndreasReitberger/ReproScrollingIssueModal

Version with bug

7.0 Release Candidate 2

Last version that worked well

Unknown/Other

Affected platforms

iOS, I was not able test on other platforms

Affected platform versions

iOS 16.1

Did you find any workaround?

No response

Relevant log output

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jfversluiscommented, Nov 9, 2022

Yay! Thanks for letting us know!

1reaction
AndreasReitbergercommented, Nov 4, 2022

@jfversluis Thanks for the reply. When is the net7 GA available? Then I can try if the issue is still there.

Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to prevent iOS keyboard from pushing the view off ...
I have a responsive web page that opens a modal when you tap a button. When the modal opens, it is set to...
Read more >
Addressing the iOS Address Bar in 100vh Layouts
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need...
Read more >
Content Jumping (and How To Avoid It)
We created Ajax containers bound to server routes that would re-render and send back just a section of the page. It worked quite...
Read more >
Prevent Page Scrolling When a Modal is Open
If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to...
Read more >
How to present a Bottom Sheet in iOS 15 with ...
A bottom sheet usually refers to a UI anchored to the bottom of the screen with content that usually supplements the screen's primary...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found