CODEWITHSUNDEEP
swiftui
JustMe
JustMe

Reputation: 145

SwiftUI: Text Field getting cut off

The textField on my SwiftUI app is getting cut off. But it doesn't happen every time. It seems to happen at random.

Screenshot of app showing text getting cut off

Here is the code I'm using:

var body: some View {
    VStack {
      Spacer()
      // Target row
      HStack {
        Text("Put the bullseye as close as you can to:")
        Text("\(target)")
      }
      Spacer()
      // Slider row
      HStack {
        Text("1")
        Slider(value: $sliderValue, in: 1...100) {_ in
          print(self.sliderValue)
        }
        Text("100")
      }
      Spacer()
      // Hit me button row
      Button(action: {
        print("Button pressed")
        self.alertIsVisible = true
      }) {
        Text(/*@START_MENU_TOKEN@*/"Hit Me!"/*@END_MENU_TOKEN@*/)

      }
      .alert(isPresented: $alertIsVisible) { () -> Alert in
        let roundedValue = Int(sliderValue.rounded())
        let score = pointsForCurrentRound()
        return Alert(title: Text("Hello there!"), message: Text("The slider's value is \(roundedValue)!\n" +
          "You scored \(score) points this round"
          ), dismissButton: .default(Text("Awesome")))
      }
      Spacer()
      // Score and start over button row
      HStack {
        Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
          Text("Start Over")
        }
        Spacer()
        Text("Score:")
        Text("999999")
        Spacer()
        Text("Round:")
        Text("999")
        Spacer()
        Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
          Text("Info")
        }
      }
      .padding(.bottom, 20)
    }
  }

I've tried adding padding trailing the text field and before the target. I've tried adding padding to the leading edge of the target. I've tried giving using the frame method on the text field to add a min length. None of these work. Any ideas?

Thanks

Upvotes: 5

Views: 9861

Answers (3)

schro
schro

Reputation: 121

This worked for me

Text("hello!")
    .fixedSize(horizontal: true, vertical: false)

Text could expand horizontally, not vertically

Upvotes: 3

Jason Furr
Jason Furr

Reputation: 327

I just came across this exact situation! After a few moments of searching, trial, and errors, I finally figured it out. The text view is trying to resize and one of the parent views have animations enabled. If anyone having this same issue adds .animation(nil) to the Text, this will likely solve the issue.

VStack {
    Text("\(Int(self.viewModel.ProgressPercentage * 100.0))%")
        .font(.largeTitle)
        .animation(nil)
}

Good luck!

Upvotes: 4

E.Coms
E.Coms

Reputation: 11531

You may add fixedSize() to lock the labels.

HStack {
  Text("Put the bullseye as close as you can to:").fixedSize()
  Text("\(target)").fixedSize()
}

Upvotes: 22

Related Questions