CODEWITHSUNDEEP
iosswiftswiftuiios13xcode11
Andre
Andre

Reputation: 7638

iOS SwiftUI: ScrollView ignore top safe area

I have a shared view in my app that can be called in different places. The root of this view is a scroll view, but sometimes it ignores the top safe area and it collapses under the navigation bar.

Here two screenshots that shows better the problem:

enter image description here enter image description here

As you can see in the second screenshot the scrollview extends for all the screen collapsing under the navigation. How can I avoid this?

Upvotes: 17

Views: 17555

Answers (6)

user3151675
user3151675

Reputation: 58019

Ihor Vovk's solution works perfectly, but if you don't want a visible padding, just change it to .padding(.top, 0.10001).

Upvotes: 7

hoangnam714
hoangnam714

Reputation: 101

Think in a simpler way, you will be surprised please use modifier .clipped() -> The problem is that the scroll view is allowing its content to overflow, like the masksToBounds property in UIkit, the padding(.top, 1) solution above is also a way to prevent the content from overflowing.

Upvotes: 9

Andriy Pohorilko
Andriy Pohorilko

Reputation: 131

I had a similar issue with the List inside NavigationView and ignored the bottom safe area. What helped me was setting the list bottom padding to some non zero value, like this:

.padding(.bottom, 1)

It looks like a bug and this issue still exists on iOS 15.2

Upvotes: 6

Arvind Patel
Arvind Patel

Reputation: 501

You can solved it by giving padding to scroll view

ScrollView {
    VStack(spacing: 0) {
      
        Text("test")
        Text("test")
        Text("test")
        Text("test")
        Text("test")
        
    }
}
.padding(.top, UIApplication.shared.windows.first!.safeAreaInsets.top )

Upvotes: 2

Ihor Vovk
Ihor Vovk

Reputation: 611

Adding .padding(.top, 1) to the scroll view will solve the issue.

Upvotes: 31

Andre
Andre

Reputation: 7638

Solved using:

.navigationViewStyle(StackNavigationViewStyle())

in all the NavigationView

Upvotes: 1

Related Questions