SwiftUI View scrolls horizontal and vertical as well, instead of scrolling only vertically

Question

I am building an app as a learning project. I ran into a problem, where one of my tabs scrolls vertically and horizontally for no reason. There is no content outside the safe-area, and i can´t think of a reason for it to be scrolling sideways.

I already tried different things, replacing the GeometryReader with a VStack, specifying that i want it to be a vertical ScrollView. Adding .clipped to the end of the View as well as removing or replacing several other views But nothing worked.

About the project: The View is wrapped in a TabView and a NavigationView. All of the other tabs were wrapped the same way, and one also uses a ScrollView, yet does not have this problem.

The main Code:

struct InformationView: View {
    
    @EnvironmentObject var model: ViewModel
    
    var radialColor1 = Color.init(red: 225/255, green: 210/255, blue: 164/255)
    var radialColor2 = Color.init(red: 233/255, green: 222/255, blue: 188/255)
    
    var isShowingWarning = true
    
    var body: some View {
        
        GeometryReader  { geo in
            ScrollView(.vertical) {
                
                VStack(alignment: .leading) {
                    
                    Text("Here is a Text")
                        .padding(.vertical)
                    
                    // W-fragen Stack
                    W_FragenCardView()
                    
                    Text("Here is another Text")
                        .padding(.vertical)
                    
                    Text("Kontakt:")
                        .font(.title3)
                        .bold()
                    
                    ContactView()
                    
                }
                .padding(.horizontal)
                
                if isShowingWarning {
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color.customRed())
                        
                        Text("Here is a third Text")
                            .minimumScaleFactor(0.1)
                            .lineLimit(10)
                            .padding()
                    }
                    .frame(height: geo.size.height/5)
                    // .frame(height: 100)
                }
                
                Text("Current Theme: \(model.themes[1]!)")
                
            }
            
        }
        .navigationBarTitle("Informationen", displayMode: .automatic)
    }
}

This is were its wrapped:

struct ContentView: View {
    
    @EnvironmentObject var model: ViewModel
    
    var body: some View {
        
        
        TabView {

            NavigationView {
                AnmeldungsView()
            }
            .tabItem {
                
                Image(systemName: "square.and.pencil")
                Text("Anmelden")
            }
            
            NavigationView {
                FotosView()
            }
            .tabItem {
                
                Image(systemName: "photo.fill.on.rectangle.fill")
                Text("Fotos")
            }
            
            
            NavigationView {
                InformationView()
            }
            .tabItem {
                
                Image(systemName: "info.circle")
                Text("Informationen")
            }
        } 
    }
}

And here an Image of how it looks when scrolling.

I hope this is sufficent to understand my problem. Any help or ideas are greatly appreciated.

P.S.: I´m new to stack overflow, so if a violated any rules please tell me :)

ScrollViews are vertical by default, remove the `. vertical`. — xTwisteDx, Jun 03 '21 at 16:32
To avoid horizontal scrolling, set the frame width of the ScrollView to some value, and be sure that the subViews have that width too. — FelipeCruzV10, Jun 03 '21 at 16:40

score 1 · Answer 1 · answered Jun 03 '21 at 18:13

You should write an array([.horizontal, .vertical]) in ScrollView instead of .vertical. change your code to this:

 GeometryReader  { geo in
        ScrollView([.horizontal, .vertical]) {
            
            VStack(alignment: .leading) {
                
                Text("Here is a Text")
                    .padding(.vertical)
                
                W_FragenCardView()
                
                Text("Here is another Text")
                    .padding(.vertical)
                
                Text("Kontakt:")
                    .font(.title3)
                    .bold()
                
                ContactView()
                
            }
            .padding(.horizontal)
            
            if isShowingWarning {
                ZStack {
                    Rectangle()
                        .foregroundColor(Color.red)
                    
                    Text("Here is a third Text")
                        .minimumScaleFactor(0.1)
                        .lineLimit(10)
                        .padding()
                }
                .frame(height: geo.size.height/5)
                // .frame(height: 100)
            }
        }

And I hope it will works :)

score 0 · Answer 2 · answered Jun 04 '21 at 14:39

It was a problem between geo.size.height/5 and the navigationBarTitle being on displayMode: .automatic. This resulted in the available height changing and somehow bugged out. Either changing displayMode: to .inline or .large, or you replace the geo.size.height/5 w/ a hardcoded Int, i used 150.

SwiftUI View scrolls horizontal and vertical as well, instead of scrolling only vertically

2 Answers2