material label behaviour

Post Reply
ANWCerensa
Posts: 3
Joined: 04 Jul 2017, 19:01

07 Jul 2017, 14:11

Hi,

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

Thanks.

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

11 Jul 2017, 08:39

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

ANWCerensa
Posts: 3
Joined: 04 Jul 2017, 19:01

21 Jul 2017, 23:00

Please let me know if it's possible
Thanks

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

01 Aug 2017, 15:24

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest