Question 375576 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – SwiftUI TextEditor internal scroll padding without text cropping

Im building note view with footer over whole UI

var body: some View {
    ZStack(alignment: .bottom) {
        VStack(alignment: .leading) {
            Text("(note.date.formatted())")
                .padding([.leading, .trailing])
                
            TextEditor(text: $note.text)
                .padding()
            }
            
            Footer {}
    }
}

There is title text with date, TextEditor and a Footer element. Footer just floats over TextEditor and blocks text from view. That’s what i need, but here’s catch

app

I need to add padding to TextEditor’s internal scroll so text scrolls under footer element, but i can scroll up enough so i can see it all. If i add .padding([.bottom], 150) to TextEditor it just crops text and it looks ugly

enter image description here

in layman’s terms i need the illusion that there is like 5 or so "n" in the end of the text, but without adding "n"

Tags:

2

Answers


  1. 0

    You might want to try contentMargins(_:for:) from iOS 17:

    TextEditor(text: $note.text)
    .padding()
    .contentMargins(.bottom, .init(top: 0, leading: 0, bottom: 50, trailing: 0)) //<- here
    Login or Signup to reply.
  2. 0

    For similar task I preferred to use scrollClipDisabled() rather than contentMargins or safeAreaInset(edge:alignment:spacing:content:) both of which have one annoying thing – they provide background which covers scrolling content entirely. I noticed this happens only with TextEditor, meanwhile ScrollView works perfectly fine with mentioned modifiers.

    scrollClipDisabled() doesn’t have this problem and seems the best option to use in your situation to beautifully and partially cover the scrolling content.

    struct FooterAboveScrollingText: View {
    var body: some View {
        VStack(spacing: 0) {
                Text("14 October, 2023")
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .background {
                        Rectangle().foregroundStyle(.white).ignoresSafeArea() // <-- Attention here!
                    }
                    .zIndex(1) // <-- And here!
                TextEditor(text: { your huge text })
                    .scrollClipDisabled()
                RoundedRectangle(cornerRadius: 20)
                    .frame(maxHeight: 60)
                    .foregroundStyle(.white)
                    .shadow(radius: 15)
                    .padding()
            }
    }
}

    However, as you can see, you still need to make a couple of adjustments to your date-title. You need to add a background and zIndex(1) to make sure that your title is not overlapped by scroll content.

    The result:

    Result image

    NOTE: One more thing to know, this solution is for iOS 17 and up, meanwhile safeAreaInset(edge:alignment:spacing:content:) is available from iOS 15.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search