TextFields - Placeholder & Helper text

Post Reply
daniele.pecora
Posts: 5
Joined: 05 Jan 2017, 12:45

13 May 2017, 07:58

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
Image

Screenshot of expected behaviour when placeholder attribute is set
Image

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
Image


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
Last edited by daniele.pecora on 08 Aug 2017, 22:05, edited 1 time in total.

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

15 May 2017, 09:03

Hi,

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

Regards

paulswan
Posts: 94
Joined: 27 Apr 2017, 08:19

21 Jun 2017, 03:40

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
Posts: 5
Joined: 05 Jan 2017, 12:45

15 Dec 2018, 23:06

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

User avatar
aragorn
Posts: 3406
Joined: 29 Jun 2013, 12:38

17 Dec 2018, 12:34

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,

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest