Placeholder text not centered for UITextField created programmatically

Question

I am creating a UITextField programmatically and placing it inside a UIView. The font size is set to 15.0f (system font). But the placeholder that appears is not centered in the text view. Any one know how to resolve this?

I found some references on SO for blurred text etc and tried setting the frame of the textfield with integer values, but it doesn't make a difference.

UITextField *txtField = [[UITextField alloc] initWithFrame:CGRectMake(5.0f, 6.0f, 278.0f, 32.0f)];
[txtField setPlaceholder:@"My placeholder"];
[txtField setFont:[UIFont systemFontOfSize:15.0]];
[txtField setBorderStyle:UITextBorderStyleRoundedRect];
[txtField setAutocorrectionType:UITextAutocorrectionTypeNo];
[txtField setAutocapitalizationType:UITextAutocapitalizationTypeNone];
[txtField setKeyboardType:UIKeyboardTypeEmailAddress];
[txtField setReturnKeyType:UIReturnKeyDone];
[txtField setClearButtonMode:UITextFieldViewModeWhileEditing];

Thank you for any help

Note: I mean that the text is not centered vertically in the textfield (it is a bit towards the top). So setting the text alignment is not the solution.

Adding an image of the issue for clarification - as seen in the image, the placeholder text is more towards the top and not in the center vertically. alt text

+1 Thanks Your Question helped me.. – Ashok May 29 '13 at 05:28 — Ashok, May 29 '13 at 05:28

score 58 · Accepted Answer · edited Jan 26 '13 at 14:26

58

You need to add:

txtField.textAlignment = NSTextAlignmentCenter; // Pre-iOS6 SDK: UITextAlignmentCenter

Keep in mind, this adjusts both the alignment of the placeholder text as well as the text the user will enter in.

How to center vertically

Since the original question was updated to request how to vertically align the placeholder text and that answer is buried in the comments, here is how to do that:

txtField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

edited Jan 26 '13 at 14:26

DiscDev

38,652
20
117
133

answered Sep 08 '10 at 07:19

jer

20,094
5
45
69

1

Sorry about that. I guess the question was a bit mis-leading. I meant that the text is not centered vertically. Updated the question. – lostInTransit Sep 08 '10 at 08:50
1

Then link us to a screenshot so we can see exactly what you're talking about. I've never seen this myself, and I've done this a fair bit. – jer Sep 08 '10 at 10:05
1

Added the image as well. Please let me know if that helps in pin-pointing the issue. Not sure what I could be doing wrong. The method for creating a textfield is pretty straightforward! – lostInTransit Sep 08 '10 at 11:49
31

Ah ok, I see what's going on. Try setting your text field's `contentVerticalAlignment` property to `UIControlContentVerticalAlignmentCenter` that should fix you right up. – jer Sep 08 '10 at 12:14
4

Shouldn't everyone be having this problem? Why isn't it default to vertical centered in the first place?! – huggie Dec 27 '12 at 02:40

score 18 · Answer 2 · answered Oct 07 '13 at 12:18

This does not work as expected on iOS7. On iOS7 you will have to override TextField class and

- (void) drawPlaceholderInRect:(CGRect)rect

method.

Like this:

- (void) drawPlaceholderInRect:(CGRect)rect
{
    [[UIColor blueColor] setFill];
    CGRect placeholderRect = CGRectMake(rect.origin.x, (rect.size.height- self.font.pointSize)/2, rect.size.width, self.font.pointSize);
    [[self placeholder] drawInRect:placeholderRect withFont:self.font lineBreakMode:NSLineBreakByWordWrapping alignment:self.textAlignment];
}

Works for both iOS7 and earlier versions.

Using lineHeight instead of pointSize gives a better result in my opinion. — Sven-Michael Stübe, Jan 16 '14 at 13:15

score 2 · Answer 3 · answered Jul 21 '15 at 17:41

2

I was using just the color, but we need to set the font as well.

This one worked for me:

[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setDefaultTextAttributes:
@{
     NSForegroundColorAttributeName:[UIColor whiteColor], 
     NSFontAttributeName: [UIFont systemFontOfSize:12]
}];

answered Jul 21 '15 at 17:41

diegosantiviago

988
8
10

This should be the accepted answer. I don't know why if you didn't set the font attribute, the placeholder will be misaligned. Maybe because the placeholder font and text font is not the same. `contentVerticalAlignment` doesn't work (at least for me). – kientux Dec 16 '16 at 11:01
This doesn't work if you use a bigger default font size than the placeholder one. – mattsson May 10 '17 at 10:51

score 0 · Answer 4 · answered May 10 '17 at 11:02

Changing the minimum line height using NSParagraphStyle was the only solution that worked for me:

    NSMutableParagraphStyle *style = [self.addressBar.defaultTextAttributes[NSParagraphStyleAttributeName] mutableCopy];
style.minimumLineHeight = self.addressBar.font.lineHeight - (self.addressBar.font.lineHeight - placeholderFont.lineHeight) / 2.0;

self.addressBar.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@"Placeholder text" attributes:@{
     NSForegroundColorAttributeName: [UIColor colorWithRed:79/255.0f green:79/255.0f blue:79/255.0f alpha:0.5f],
     NSFontAttributeName : placeholderFont,
     NSParagraphStyleAttributeName : style
}];

Placeholder text not centered for UITextField created programmatically

4 Answers4

Linked