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
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
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"
2
Answers
You might want to try
contentMargins(_:for:)
from iOS 17:For similar task I preferred to use
scrollClipDisabled()
rather thancontentMargins
orsafeAreaInset(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.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:
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.