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

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

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

Tags:

2

Answers


  1. 0

    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)
    }
  }
    Login or Signup to reply.
  2. 0

    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)
    }
  }
   
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search