How can I move the clear button in a UITextField?

Question

For some reason, when I add a UITextfield as a subview of the contentview of a tablecell, the clearbutton does not align with the text typed in the field, and appears a bit unde

Answer 1

Subclass UITextField and override this method:

- (CGRect)clearButtonRectForBounds:(CGRect)bounds
{
    return CGRectMake(bounds.origin.x - 10, bounds.origin.y, bounds.size.width, bounds.size.height);
}

return the CGRect that matches your needs.

Answer 2

The answer from Van Du Tran in Swift 4:

class CustomTextField: UITextField {


override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
    let originalRect = super.clearButtonRect(forBounds: bounds)

    return originalRect.offsetBy(dx: -8, dy: 0)
}

}

Answer 3

Swift 4 version would be

import UIKit

class LoginTextField: UITextField {

    override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: xPos, y:yPos, width: yourWidth, height: yourHeight)
    }

}

Answer 4

I had subclassed the UITextField and override the function clearButtonRectForBounds:.

.h

#import <UIKit/UIKit.h>

@interface TVUITextFieldWithClearButton : UITextField

@end

.m

#import "TVUITextFieldWithClearButton.h"

@implementation TVUITextFieldWithClearButton

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)awakeFromNib
{
    self.clearButtonMode = UITextFieldViewModeWhileEditing;
}


- (CGRect)clearButtonRectForBounds:(CGRect)bounds
{
    return CGRectMake(bounds.size.width/2-20 , bounds.origin.y-3, bounds.size.width, bounds.size.height);
}

@end

Answer 5

As stated by @Luda the correct way is to subclass UITextField and override - (CGRect)clearButtonRectForBounds:(CGRect)bounds. However the bounds passed in to the method are those of the view itself and not the button. Therefore you should call super to get the OS provided size (to avoid distortion of the image) and then adjust the origin to suit your needs.

e.g.

- (CGRect)clearButtonRectForBounds:(CGRect)bounds {
    CGRect originalRect = [super clearButtonRectForBounds:bounds];
    return CGRectOffset(originalRect, -10, 0); //shift the button 10 points to the left
}

Apple docs state:

Discussion You should not call this method directly. If you want to place the clear button in a different location, you can override this method and return the new rectangle. Your method should call the super implementation and modify the returned rectangle’s origin only. Changing the size of the clear button may cause unnecessary distortion of the button image.

Answer 6

Swift 4, 5

Subclass UITextField (Working Perfectly, Tested)

class textFieldWithCrossButtonAdjusted: UITextField {

    override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {

        let originalRect = super.clearButtonRect(forBounds: bounds)

        //move 10 points left

        return originalRect.offsetBy(dx: -10, dy: 0)
    }
}