UITextfield gets cut from the top while in editing mode

Question

I got two UITextfields with separator(UILabel) between them. I put them all into UIStackView.

While in editing mode, content of the textfield is cut from the top, as seen in the picture below

I've found that the only way to remove this issue is to make this separator big enough, but this spoils my design.

How to fix it?

It's worth to mention my UIStackView settings:

and show how I implement this custom bottomline-style UITextfield

class CustomTextField: UITextField {

override func awakeFromNib() {
    super.awakeFromNib()

    let attributedString = NSAttributedString(string: self.placeholder!, attributes: [NSForegroundColorAttributeName:UIColor.lightGray, NSFontAttributeName: UIFont(name: "GothamRounded-Book", size: 18.0)! ])
    self.attributedPlaceholder = attributedString
    self.tintColor = UIColor.appRed
    self.font = UIFont(name: "GothamRounded-Book", size: 18.0)!
    self.borderStyle = .none
    self.textAlignment = .center

}


override func textRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.insetBy(dx: 0, dy: 5)
}

override func editingRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.insetBy(dx: 0, dy: 5)
}


override var tintColor: UIColor! {

    didSet {
        setNeedsDisplay()
    }
}

override func draw(_ rect: CGRect) {

    let startingPoint   = CGPoint(x: rect.minX, y: rect.maxY)
    let endingPoint     = CGPoint(x: rect.maxX, y: rect.maxY)

    let path = UIBezierPath()

    path.move(to: startingPoint)
    path.addLine(to: endingPoint)
    path.lineWidth = 2.0

    tintColor.setStroke()
    tintColor = UIColor.appRed

    path.stroke()
}

}

Any help much appreciated

EDIT

I have another TextField like that and it works fine, but it doesn't sit inside any horizontal UIStackView. Here is the screenshot of hierarchy:

i would suggest you to take a look at view hierarchy in menu -> debug -> view debugging -> capture view hierarchy (of cource with the simulator running) — zombie, Mar 22 '17 at 08:30
it seems to me like the edit height is less than the required so maybe in intrinsicContentSize and isEditing try to give a bigger height — zombie, Mar 22 '17 at 09:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138713/discussion-between-dcdc-and-zombie). — theDC, Mar 22 '17 at 09:06

score 0 · Answer 1 · answered Mar 22 '17 at 00:09

Unfortunately you need to check the size on editing

class CustomTextField: UITextField {
   override func awakeFromNib() {
      super.awakeFromNib()
      self.addTarget(self, action: #selector(textFieldEditingChanged), for: .editingChanged)
   }

   func textFieldEditingChanged(_ textField: UITextField) {
      textField.invalidateIntrinsicContentSize()
   }


   override var intrinsicContentSize: CGSize {
      if isEditing {
         let string = text ?? ""
         let size = string.size(attributes: typingAttributes)
         return CGSize(width: size.width + (rightView?.bounds.size.width ?? 0) + (leftView?.bounds.size.width ?? 0) + 2,
                       height: size.height)
      }

      return super.intrinsicContentSize
   }
}

Unfortunately it didn't work, textfields behave the same way as before :( — theDC, Mar 22 '17 at 06:59

UITextfield gets cut from the top while in editing mode

1 Answers1