SwiftUI TextField and TextEditor Not Aligning Left in VStack? - Stack Overflow

I'm having trouble with aligning the text content of a TextField and TextEditor to the left when they are placed in the same VStack in SwiftUI. By default, the text doesn't seem perfectly aligned. I found that adding .padding(.horizontal, 5) helps achieve better alignment, but I'm wondering if there’s a more elegant or recommended way to handle this? Any insights or suggestions would be appreciated!

var body: some View {
      VStack(spacing: 0) {
         TextField(
            "This is some editable text...",
            text: $username,
            axis: .vertical
         )
         .padding(.horizontal, 5)
         TextField(
            "This is some editable text...",
            text: $username,
            axis: .vertical
         )
         .padding(.horizontal, 0)
         TextEditor(text: $fullText)
            .padding(.horizontal, 0)
      }
      .frame(height: 260)
      .padding(.all, 20)
   }

I'm having trouble with aligning the text content of a TextField and TextEditor to the left when they are placed in the same VStack in SwiftUI. By default, the text doesn't seem perfectly aligned. I found that adding .padding(.horizontal, 5) helps achieve better alignment, but I'm wondering if there’s a more elegant or recommended way to handle this? Any insights or suggestions would be appreciated!

var body: some View {
      VStack(spacing: 0) {
         TextField(
            "This is some editable text...",
            text: $username,
            axis: .vertical
         )
         .padding(.horizontal, 5)
         TextField(
            "This is some editable text...",
            text: $username,
            axis: .vertical
         )
         .padding(.horizontal, 0)
         TextEditor(text: $fullText)
            .padding(.horizontal, 0)
      }
      .frame(height: 260)
      .padding(.all, 20)
   }

• swiftui

Share Improve this question Follow asked Feb 4 at 12:44 Ehz uiqEhz uiq 5155 bronze badges 1

• Why don't you just use another vertical TextField with line limit that acts like a TextEditor? Are there any specific reasons? – Mojtaba Hosseini Commented Feb 4 at 14:29

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 1

Unfortunately, SwiftUI's TextEditor has an inherent internal padding that cannot be removed directly using public APIs. This is a limitation of the framework, and until Apple provides more control over this behavior, we have to use small adjustments like this to achieve the desired alignment.

Have you tried adding negative padding on the TextEditor since it automatically adds default internal padding. Below is an example:

struct ContentView: View {
    
    @State private var username: String = ""
    @State private var fullText: String = ""
    
    var body: some View {
        VStack(spacing: 0) {
            
               TextField(
                  "This is some editable text...",
                  text: $username,
                  axis: .vertical
               )
              
               TextField(
                  "This is some editable text...",
                  text: $username,
                  axis: .vertical
               )
               
               TextEditor(text: $fullText)
                .padding([.leading], -4)
                
                  
        }.padding()
            
    }
}

It seems, this is just how the default TextFieldStyle.plain is implemented.

A way to work around it, would be to create a custom TextFieldStyle.

struct CustomTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(.horizontal, 5)
    }
}

You can use it like this:

TextField(
    "This is some editable text...",
    text: $username,
    axis: .vertical
)
    .textFieldStyle(CustomTextFieldStyle())

After testing, I found that adding .padding(.horizontal, 5) to both TextField and TextEditor effectively left-aligns the text. This method is simple and solved the issue I was facing.

.padding(.horizontal, 5)