Page 1 of 1
material label behaviour
Posted: 07 Jul 2017, 14:11
by 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.
Re: material label behaviour
Posted: 11 Jul 2017, 08:39
by DarthMaul
I will research it a little bit and get back to you.
Re: material label behaviour
Posted: 21 Jul 2017, 23:00
by ANWCerensa
Please let me know if it's possible
Thanks
Re: material label behaviour
Posted: 01 Aug 2017, 15:24
by 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