material-components-ios
material-components-ios copied to clipboard
[TextFields] Center the inline and floating placeholder inside an [MDCTextField]
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
- Associated internal bug: b/117177909
The title doesn't have a [Component] prefix.
There should be option to align label to the right too.
Consequently, there should be a way to align the helper text.
Consequently, there should be a way to align the helper text.
@zgosalvez use semanticContentAttribute
https://github.com/material-components/material-components-ios/issues/1945
@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.
@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.
Agreed.
We would like the ability to vertically align placeholder text as well.
@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 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.
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