material-components-ios icon indicating copy to clipboard operation
material-components-ios copied to clipboard

[TextFields] Center the inline and floating placeholder inside an [MDCTextField]

Open kedavidsa opened this issue 6 years ago • 11 comments

I'm trying to center the inline and floating placeholder inside an MDCTextField that is using MDCTextInputControllerUnderline or some other controller with no success.

Reproduction steps

I have an MDCTextField in my storyboard, at the viewDidLoad() method of my controller I initialize the MDCTextInputControllerUnderline with my MDCTextField. Then I try to center the inline and floating placeholder using different ways:

tfUserController = MDCTextInputControllerUnderline(textInput: tfUser)
//Center the placeholder
tfUser.textAlignment = .center
let paragraph = NSMutableParagraphStyle()
paragraph.alignment = .center
tfUser.attributedPlaceholder = NSAttributedString(string: "placeholder text", attributes: [NSAttributedStringKey.paragraphStyle: paragraph,NSAttributedStringKey.foregroundColor : UIColor.red])
//or
tfUser.placeholderLabel.attributedText = NSAttributedString(string: "placeholder text",
                                                                    attributes: [NSAttributedStringKey.paragraphStyle: paragraph])
//or
tfUser.placeholderLabel.textAlignment = NSTextAlignment.center;

With no success

Expected behavior

I expect to have the placeholder floating in the middle --------Place holder------- ............................................

Actual behavior

The placeholder is displayed without changes Place holder--------------- ............................................

Platform (please complete the following information)

  • Device: iPhone8
  • OS: iOS11

Internal data

kedavidsa avatar Aug 01 '18 16:08 kedavidsa

The title doesn't have a [Component] prefix.

There should be option to align label to the right too.

DavidWittix avatar Sep 03 '18 08:09 DavidWittix

Consequently, there should be a way to align the helper text.

zgosalvez avatar Dec 02 '18 13:12 zgosalvez

Consequently, there should be a way to align the helper text.

@zgosalvez use semanticContentAttribute

https://github.com/material-components/material-components-ios/issues/1945

DavidWittix avatar Dec 02 '18 13:12 DavidWittix

@DavidWiseGroup, semanticContentAttribute only affected the placeholder, not the helper text. I appreciate the tip though.

Actually, I want to have my elements centered. It seems semanticContentAttribute is unable to do that.

zgosalvez avatar Dec 02 '18 14:12 zgosalvez

@jverkoey Can you clarify why this is a bug? It looks like a feature request. As far as I can tell from the Material Text Fields guidelines article, there isn't any guidance about centering the placeholder/helper text and all of the mocks I found were aligning the fields according to the locale/language.

romoore avatar Dec 03 '18 14:12 romoore

Agreed.

jverkoey avatar Dec 03 '18 14:12 jverkoey

We would like the ability to vertically align placeholder text as well.

adamirowe avatar Jul 11 '19 21:07 adamirowe

@jverkoey Can you clarify why this is a bug? It looks like a feature request. As far as I can tell from the Material Text Fields guidelines article, there isn't any guidance about centering the placeholder/helper text and all of the mocks I found were aligning the fields according to the locale/language.

The fields in those guidelines have their placeholder text centered vertically. How would we achieve the same look and feel on iOS?

adamirowe avatar Jul 11 '19 21:07 adamirowe

@adamirowe I believe this request is to horizontally center the text (versus .Leading/.Trailing alignments). If you'd like support for vertical alignment of the placeholder text, please open a separate Issue for that request.

romoore avatar Jul 31 '19 15:07 romoore

This is still an issue.

Is there no way to centre the inline placeholder? What if the textAlignment of my text field is centred? It looks ridiculous if the placeholder is left aligned in this case

tylerjames avatar Oct 06 '20 16:10 tylerjames