CODEWITHSUNDEEP
iosswiftswiftui
Stefan Nestorov
Stefan Nestorov

Reputation: 380

How to add more padding bellow a TextView when the keyboard is shown

When i have TextField inside ScrollView and tap on it the keyboard is shown as expected. But it seems that the TextField is moved up just enough to show the input area but i want to be moved enough so that is visible in its whole. Otherwise it looks cropped. I couldn't find a way to change this behaviour.

struct ContentView: View {
  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
      }
      .padding()
      .background(.red)
    }
  }
   
}

enter image description here

enter image description here

Upvotes: 8

Views: 1460

Answers (2)

cluelessCoder
cluelessCoder

Reputation: 1088

You can provide additional padding to the view (and it works even in iOS 13 and 14):

struct ContentView: View {
  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
          .padding(.bottom, 32) //here, set as much pasding as you want
      }
      .padding()
      .background(.red)
    }
  }
   
}

Upvotes: 1

burnsi
burnsi

Reputation: 7754

Use a .safeAreaInset modifier.

  @State var text:String = ""

  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        ForEach(1...12, id: \.self) {
          Text("\($0)…")
            .frame(height:50)
        }
        TextField("Label..", text: self.$text)
          .padding(10)
          .background(.white)
          .cornerRadius(10)
          .overlay(
            RoundedRectangle(cornerRadius: 10)
              .stroke(.blue, lineWidth: 1)
          )
      }
      .padding()
      .background(.red)
    }.safeAreaInset(edge: .bottom) { //this will push the view when the keyboad is shown
        Color.clear.frame(height: 30)
    }
  }

Upvotes: 18

Related Questions