SwiftUI - ScrollView and TextEditor Height Not Working

Question

I'm posting this question again, with a simplified view of my code and views. I'll delete the old one since I think I didn't explain my issue properly there (and it has no answers yet).

I'm trying to position a HStack with an initial height at the bottom of the screen. With the top portion being a scroll view. The HStack might expand to a certain extent as more text is typed into the Text Editor.

I am able to achieve this, as long as there is no Text Editor.

I need help with figuring out how to do this with Text Editor.

Please see below -

With just a text view

With a text editor instead of text view

Here's the code for it -

struct ContentView: View {

@State var myText: String = "This Text Editor is screaming \n\n THIS IS SPARTA!!! \n\n at me and kicking me into the abyss of similarly worded Stackoverflow questions."

var body: some View{
    
    VStack(spacing:0){
        
        GeometryReader {geo in
            ScrollView(.vertical, showsIndicators: false){
                ForEach(1 ..< 200, id: \.self){ num in
                    Text("\(num)")
                        .frame(width: geo.size.width)
                        .padding(5)
                        .background(.yellow)
                }
            }
            .background(.orange)
            .frame(minWidth: geo.size.width, maxHeight: geo.size.height * 0.96 , alignment: .top)
        }
        
        HStack(spacing: 0){
            Text("This HStack is supposed to contain a text editor that expands as needed to a max height but starts off at this height.")
                .padding()
                .background(.teal)
            
            /*TextEditor(text: $myText)
             .multilineTextAlignment(.center)
             .font(.title3)
             .padding()*/
        }
        .frame(minHeight:50)
        .background(.teal)
    }
}}

Any help in the right direction is greatly appreciated!

Yrb · Accepted Answer · 2022-01-28 19:06:46Z

0

See the following with comments:

struct ContentView: View {

    @State var myText: String = "This Text Editor is screaming \n\n THIS IS SPARTA!!! \n\n at me and kicking me into the abyss of similarly worded Stackoverflow questions."

    var body: some View{
        
        VStack(spacing: 0) {
                ScrollView(.vertical, showsIndicators: false) {
                    ForEach(1 ..< 200, id: \.self) { num in
                        Text("\(num)")
                            // The GeometryReader is unnecessary. Use a frame with .infinity to expand your row.
                            .frame(maxWidth: .infinity)
                            .background(.yellow)
                            .padding(5)
                    }
                }
                .background(.orange)
            
            HStack(spacing: 0) {
                TextEditor(text: $myText)
                 .multilineTextAlignment(.center)
                 .font(.title3)
                 // Use .fixedSize to reduce the height of the TextEditor to its minimal height.
                 .fixedSize(horizontal: false, vertical: true)
                 // this .padding() gives you space around your TextEditor for margins
                 .padding()
                 // this background gives you white margins
                 .background(Color.white)
                 // this .padding() keeps the background above from resizing to the size of the teal background.
                 .padding()
            }
            .frame(minHeight: 50)
            .background(.teal)
        }
    }
}

answered Jan 28, 2022 at 19:06

Yrb

9,9232 gold badges26 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SWIFTDEV Over a year ago

Thank you for the code. I tried using this, (using fixedSize)... the height did come down, but the expanding part is not working. It expands when typing and shrinks... giving it a "jumping up and down" look due to the height increasing and shrinking.

Yrb Over a year ago

That is a bit of a pitfall of TexEditor right now. There is a workaround for that. See this answer.

Collectives™ on Stack Overflow

SwiftUI - ScrollView and TextEditor Height Not Working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related