TextFields - Placeholder & Helper text

[daniele.pecora]

Hi

according to the Material Design Guide at
https://material.io/guidelines/componen ... lds-layout
the ULTIMA Template is missing support for placeholder and helper text
for form input fields

Explaination

Placeholder
The placeholder may be set as attribute to the input field but it will be covered up by the label.

Screenshot of actual behaviour when placeholder attribute is set


Screenshot of expected behaviour when placeholder attribute is set


Helper text
There is actually no way to set the helper text without doing some own css styling.
What I've seen is that input field error messages will appear right there where also the helper text should be.
So there is simply missing the sass style definition for .md-inputfield .ui-message .ui-message-info
and other message types.

Screenshot of expected feature



Is there any solution for this out there/ongoing?

Thx in advance

Solution
Here is how I helped myself and solved this issues by adding some sass in theme/_forms.scss

Placeholder
Adding the missing selectors input[placeholder] ~ label , [ng-reflect-placeholder] ~ label and textarea ~ label
to the class md-inputfield
moves label to top if placeholder is set

Helper text
Adding the missing css definitions
for the class "ui-messages-info"
allows you to use this message type as helper text
in the same manner as the message type "ui-messages-error"

Code: Select all

body {
  /* 
    * Adding the missing selector s
    * moves label to top if placeholder is set 
    */
  .md-inputfield {
  
    // missing selectors
    [ng-reflect-placeholder] ~ label, // p-calendar, p-slider, p-autoComplete, p-dropdown
    textarea ~ label, // textareas
    input[placeholder] ~ label, // input fields
    
    input:focus ~ label,
    input.ui-state-filled ~ label,
    .ui-inputwrapper-focus ~ label,
    .ui-inputwrapper-filled ~ label {
      top: -20px;
      font-size: 12px;
      color:$primaryColor;
    }

  /* 
    * Adding the missing css definitions
    * for the class "ui-messages-info"
    * allows you to use this message type as helper text
    * in the same manner as the message type "ui-messages-error"
    */
    .ui-message {
      background-color: transparent;
      border: 0 none;
      margin: 0px;
      font-size: .75em;
      color: $primaryColor;
      &.ui-messages-info {
        color: $primaryColor;
      }
    }
  }
}

*updated classes and colors

[DarthMaul]

Hi,

Great thanks for sharing we will discuss it with my colleagues.

Regards

[paulswan]

We noticed similar issues with placeholder and helper text so this fix would be good for us too.

The MD guidelines has the helper text the same color as the label so I'd probably do the following based on this:

Code: Select all

        .ui-message {
            background-color: transparent;
            border: 0 none;
            margin: 0px;
            font-size: .75em;

            &.ui-messages-error {
                color: #e62a10;
            }
            &.ui-messages-info {
                color: #999;
            }
        }

[daniele.pecora]

@ULTIMA team:
are we supposed to solve this by overriding CSS?

[mert.sincan]

Hi @daniele.pecora,

Firstly, so sorry for the delayed response!

Thanks a lot for the CSS codes, I changed your CSS codes related to input component. I think the expected behavior in your screenshot is wrong according to material spec. Please see the screenshot in "States / Filled text fields (baseline)" section; https://material.io/design/components/t ... text-field

Please try the following scss;

Code: Select all

...
.md-inputfield {
        display: block;
        position:relative;

        > label {
          color:$inputFieldLabelTextColor;
          font-weight:normal;
          position:absolute;
          pointer-events:none;
          left:5px;
          top:1px;
          transition: 0.3s ease all;
          -moz-transition: 0.3s ease all;
          -webkit-transition: 0.3s ease all;
        }

        input[placeholder],
        textarea[placeholder] {
            &::-webkit-input-placeholder { /* WebKit browsers */
                opacity:  0;
            }
            &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
               opacity:  0;
            }
            &::-moz-placeholder { /* Mozilla Firefox 19+ */
               opacity:  0;
            }
            &:-ms-input-placeholder { /* Internet Explorer 10+ */
                opacity:  0;
            }
            
            &:focus {
                &::-webkit-input-placeholder { /* WebKit browsers */
                    opacity:  1;
                }
                &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                    opacity:  1;
                }
                &::-moz-placeholder { /* Mozilla Firefox 19+ */
                    opacity:  1;
                }
                &:-ms-input-placeholder { /* Internet Explorer 10+ */
                    opacity:  1;
                }
            }
        }

        p-dropdown ~ label,
        p-multiSelect ~ label,
        p-chips ~ label,
        textarea:focus ~ label,
        textarea.ui-state-filled ~ label,
        input:focus ~ label,
        input.ui-state-filled ~ label,
        .ui-inputwrapper-focus ~ label,
        .ui-inputwrapper-filled ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }
        
        ...

on Material spec, it looks only when the placeholder text is focused on input component. For you, okay?

Best Regards,