SwiftUI sheet has extra top and bottom padding when keyboard is displayed

Question

Created Jan ’24

Replies 5

Boosts 0

Views 1.9k

Participants 4

I have a VStack with TextField inside a sheet, sheet has a presentation detent of the exact height of the content. When editing starts, sheet seems to expand and show extra padding at the top and at the bottom. VStack is already ignoring safe area, but the padding is still visible. Why is it happening and how can I fix this?

Attaching minimal reproducible code:

struct TestView: View {
    @State private var text = ""

    var body: some View {
        Color.white
            .sheet(isPresented: .constant(true)) {
                VStack(alignment: .leading, spacing: 0) {
                    Text("Title")
                        .frame(height: 30)
                    TextField("Text", text: $text)
                        .frame(height: 30)
                }
                .padding(20)
                .background(Color.gray)
                .ignoresSafeArea()
                .presentationDetents([.height(100)])
            }
    }
}

Attaching screenshots of the sheet before and after editing starts, extra padding is white:

Simulator Screenshot - iPhone 15 Pro - 2024-01-12 at 10.45.13.png

Simulator Screenshot - iPhone 15 Pro - 2024-01-12 at 10.45.18.png

Boost

Answer 1

hugo_pivaral OP

Nov ’24

Did you find a solution/explanation for this issue? I'm running into the same problem

0

Answer 2

tohkarle OP

Jan ’25

Not sure why it worked but wrapping my sheet content in GeometryReader solved this issue for me.

GeometryReader { _ in
    sheetContent
}
.presentationDetents(...)

1

Answer 3

bandjepaisa2 OP

Feb ’25

Because you explicitly added padding. You need to remove this:

.padding(20)

0

Answer 4

bandjepaisa2 OP

Feb ’25

... actually, it's because your presentation detents are 100, and you have 2 Texts with heights of 30 each. VStack will be placed in the centre of the view, so you have 20 pixels top and bottom gap (i.e. (100 - 60) / 2).

If you make your height equal that of the content, you won't see the gaps. So make the detent height 60, or leave it at 100 and make the Text heights 50 each.

0

Answer 5

bandjepaisa2 OP

Feb ’25

Or leave the dimensions the same and add a Spacer() under your TextField.

0