iOS: How can I prevent a UITextField from going off screen - ios

Question

I am currently developing an application which has two UILabels inside a Vertical StackView, two UITextFields inside a Vertical StackView, and both of those Vertical StackViews inside one Horizontal StackView as such:
I have constraints put in place. When the application runs on bigger devices such as an iPhone 11, it looks perfect as you can see here:
But if I switch to a smaller device like the iPhone 8 you can see the lines hug the edge of the phone as such:
The way I make the underline for the TextField is by using a class I created called StyledTextField. It looks like this:
class StyledTextField: UITextField {
var bottomLine = CALayer()
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder: NSCoder) {
super.init(coder: coder)
styleTextField()
}
private func styleTextField() {
font = UIFont(name: "Quicksand", size: UIFont.labelFontSize)
// Create the bottom line
bottomLine.frame = CGRect(x: 0, y: frame.height - 2, width: frame.width, height: 2)
bottomLine.backgroundColor = Environment.Colours.primary.cgColor
// Remove border on text field
borderStyle = .none
// Add the line to the text field
layer.addSublayer(bottomLine)
}
func makeUnderlineLight() {
bottomLine.backgroundColor = Environment.Colours.primaryAssisted.cgColor
}
}
In the Storyboard, I assign the UITextField class to be that of the "StyledTextField".
Additionally, in my viewDidLoad function on the Controller that deals with the UITextFields, I call the setUpUI() function which does the following:
func setUpUI() {
title = "Add Task"
taskNameTextField.attributedPlaceholder = NSAttributedString(string: "Name", attributes: [NSAttributedString.Key.foregroundColor: Environment.Colours.lightGray])
moreInfoTextField.attributedPlaceholder = NSAttributedString(string: "(Optional)", attributes: [NSAttributedString.Key.foregroundColor: Environment.Colours.lightGray])
setUpDatePicker()
moreInfoTextField.makeUnderlineLight()
if isEditing() {
showTaskToEdit()
}
view.backgroundColor = Environment.Colours.secondary
}
As you can see, I call the makeUnderlineLight() StyledTextField function once inside there.
Thank you!

Answer 1

Simple two-step solution:
Rewrite styleTextField so that it keeps a reference to the underline layer and removes the underline layer if it already exists, before making a new one.
Move the call to styleTextField() to layoutSubviews. (Don't forget to call super.)

Answer 2

select Your "More Info:" label and set horizontal compress resistanse priority to 1000
it ca be found here: