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

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 :)

Answer 1

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 :)

Answer 2

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.