IOS 13: spacing Issue with UITextField rightView

Question

I am facing a spacing issue with a right view of UITextField in IOS 13, See my following code and screenshot of ios 13 and ios 12.4

In IOS 12.4 simulator display proper space in the right view (UIButton)of UITextField

In IOS 13.0 simulator has a spacing issue in the right view (UIButton)of UITextField

let dropdownButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: txtField.frame.height))
dropdownButton.backgroundColor = UIColor.clear
dropdownButton.setImage(UIImage(named: "ic_DownArrow"), for: UIControl.State())            
txtField.rightView = dropdownButton           
txtField.rightViewMode = .always

score 33 · Accepted Answer · edited Oct 07 '19 at 12:24

33

Apparently this was a change in the way rightViewRect(forBounds:) behaves in iOS 13 Beta 5.

From the iOS & iPadOS 13 Developer Beta 5 Release Notes:

UIKit - Resolved Issues

Prior to iOS 13, UITextField assumed that the frames of its leftView and rightView were correctly set when assigned and would never change. Starting in iOS 13, the implementation of leftViewRect(forBounds:) and rightViewRect(forBounds:) now ask the view for its systemLayoutSizeFitting(:). To achieve the previous behavior when linking against and running on iOS 13, add explicit sizing constraints on the view, wrap it in a plain UIView, or subclass the view and implement systemLayoutSizeFitting(:). (51787798)

So Add Auto-Layout constraints to your custom view that you added to the rightView

Example:-

override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.width - 30, y: 0, width: 20 , height: bounds.height)
    }

edited Oct 07 '19 at 12:24

AtulParmar

4,358
1
24
45

answered Sep 30 '19 at 18:11

Bruno Vaillant

441
3
5

1

How to do this in Objective C? – Gautam Shrivastav Dec 03 '19 at 07:38
How to use this in Swift? – Aditya Ahuja Jan 23 '20 at 11:25
2

@GautamShrivastav on Objective-C you only have to set it this way: `[txtField.rightView.widthAnchor constraintEqualToConstant:50.0].active = YES;` – Ricardo Barroso Nov 09 '20 at 19:06
1

Thanks @RicardoBarroso – Gautam Shrivastav Nov 09 '20 at 19:13

score 14 · Answer 2 · answered Nov 11 '19 at 14:12

Set the width constraint for the leftView or rightView you're adding.

leftImageView.widthAnchor.set(to: 30.0)
textField.leftView = leftImageView
textField.leftViewMode = .always

Here's the extension I use to set the width constraint:

extension NSLayoutDimension {

@discardableResult
func set(
        to constant: CGFloat,
        priority: UILayoutPriority = .required
        ) -> NSLayoutConstraint {

        let cons = constraint(equalToConstant: constant)
        cons.priority = priority
        cons.isActive = true
        return cons
    }
}

score 4 · Answer 3 · answered Sep 30 '19 at 11:21

Probably your image is smaller than width: 50, height: txtField.frame.height, so your button is reduced.

You can try add some container:

let dropdownButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: txtField.frame.height))
dropdownButton.backgroundColor = .clear
dropdownButton.setImage(UIImage(named: "ic_DownArrow"), for: UIControl.State())
let container = UIView(frame: dropdownButton.frame)
container.backgroundColor = .clear
container.addSubview(dropdownButton)
txtField.rightView = container
txtField.rightViewMode = .always

score 4 · Answer 4 · edited Dec 24 '19 at 11:48

4

This worked for me and it also solves the issue that happens in iPhone X/11, when the rightView takes up full width of the textField:

txtField.rightView = dropdownButton
txtField.translatesAutoresizingMaskIntoConstraints = false
txtField.rightView?.widthAnchor.constraint(equalToConstant: 50).isActive = true

edited Dec 24 '19 at 11:48

סטנלי גרונן

2,917
23
46
68

answered Dec 24 '19 at 11:29

Faisal Arefin

41
1
1

rosem · Answer 5 · 2019-09-30T19:18:30.920

I got it to work using Bruno's method.

1) Create a container view and set its width and height using auto layout. Width and height should include the subview's size + required spacing.

2) Create the subview you want to show in the text field. Set the width, height, and layout using auto layout. Add it to the container view.

3) Add the container view to the text field

You can see my container matches the height of the text field. The width is the width of the button (44), plus the spacing I want (16). When I add my subview I'll align it to the left of the container. That will give me 16px spacing between the right of the button and the edge of the text field.

let forgotButtonContainer = UIView()
forgotButtonContainer.translatesAutoresizingMaskIntoConstraints = false
forgotButtonContainer.widthAnchor.constraint(equalToConstant: 44.0 + 16.0).isActive = true
forgotButtonContainer.heightAnchor.constraint(equalToConstant: 48.0).isActive = true

forgotButton = PFSecondaryButton(link: "Forgot?")
forgotButton.translatesAutoresizingMaskIntoConstraints = false
forgotButtonContainer.addSubview(forgotButton)

forgotButton.topAnchor.constraint(equalTo: forgotButtonContainer.topAnchor).isActive = true
forgotButton.leftAnchor.constraint(equalTo: forgotButtonContainer.leftAnchor).isActive = true
forgotButton.bottomAnchor.constraint(equalTo: forgotButtonContainer.bottomAnchor).isActive = true

passwordField.rightView = forgotButtonContainer

score 0 · Answer 6 · answered Oct 30 '19 at 01:55

I resove the same problem by set this:

override textField rightViewRectForBounds: method,

- (CGRect)rightViewRectForBounds:(CGRect)bounds {
    if (self.rightView) {
        CGRect rightFrame = self.rightView.frame;
        return CGRectMake(bounds.size.width - rightFrame.size.width, 0, rightFrame.size.width, bounds.size.height);
    }
    return CGRectZero;
}

score 0 · Answer 7 · answered Jun 10 '20 at 17:03

0

Another solution I came across for this is to set translatesAutoresizingMaskIntoConstraints to true for the view you are assigning to leftView for iOS 13+ and false otherwise.

answered Jun 10 '20 at 17:03

Ravi Tripathi

778
1
5
12

score 0 · Answer 8 · answered Jul 12 '20 at 08:18

you can change right padding and left padding from the extension which I made ........... you can use IBDesignable or not as you see

import UIKit

@IBDesignable
extension UITextField {
    
    @IBInspectable var paddingLeftCustom: CGFloat {
        get {
            return leftView!.frame.size.width
        }
        set {
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
            if leftView == nil {
                leftView = paddingView
                leftViewMode = .always
            }
            
        }
    }

    @IBInspectable var paddingRightCustom: CGFloat {
        get {
            return rightView!.frame.size.width
        }
        set {
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
            if rightView == nil {
                rightView = paddingView
                rightViewMode = .always
            }
            
        }
    }
}

this answer makes no sense with regards to the question. It was asked why the image inset is gone - and as you might see, your solution requires the left/right view of the UITextField to be empty. — linus_hologram, Oct 09 '22 at 20:50

IOS 13: spacing Issue with UITextField rightView

8 Answers8