material label behaviour

[ANWCerensa]

Hi,

I'm looking for a CSS sample that makes label attached to a textbox works like material design within NG Poseidon template.

Thanks.

[DarthMaul]

I will research it a little bit and get back to you.

[ANWCerensa]

Please let me know if it's possible
Thanks

[DarthMaul]

Hi,

It is possible you need to arrange your input's according to that for example

Code: Select all

<span class="md-inputfield">
    <input type="text" pInputText>
    <label>Name</label>
</span>

After this you need md-inputfield css

Code: Select all

.md-inputfield {
        display: block;
        position:relative; 
        
        label {
          color:#999; 
          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:focus ~ label,
        input.ui-state-filled ~ label,
        .ui-inputwrapper-focus ~ label,
        .ui-inputwrapper-filled ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }

        .input:-webkit-autofill ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }

        input.ng-dirty.ng-invalid ~ label {
            color: $invalidInputLabelColor;
        }
        
        .ui-message {
            &.ui-messages-error {
                background-color: transparent;
                border: 0 none;
                margin: 0px;
                color: #e62a10;
                font-size: .75em;
            }
        }
    }

You need to add this block to your _forms.scss inside body

Regards