In my Angular project, I have created a component for an input field with a floating label. The label animates up when the input is focused and animates back down when it loses focus. However, I am facing an issue where if a value is typed in the input field and then left, the label overlaps the value instead of staying floated above the input. How can I modify the ngClass to keep the label floated when the input is not empty or focused?
Unfortunately, I cannot provide a snippet here as only AngularJS is supported on this platform. Here is the code:
HTML:
<div class="my-input" [ngClass]="isFocused ? 'state-my-input--active' : ''">
<div class="my-input__wrapper">
<label class="my-input__label">Label</label>
<input type="text" class="my-input__input" (blur)="isFocused = false" (focus)="isFocused = true">
</div>
</div>
SCSS:
.my-input {
display: flex;
flex-direction: column;
margin-top: 50px;
}
.my-input__wrapper {
display: flex;
flex-direction: column;
position: relative;
}
.my-input__label {
bottom: 8px;
color: blue;
font-size: 14px;
position: absolute;
transition: all 0.3s ease-in-out;
}
.my-input__input {
border: none;
border-bottom: 2px solid darkgray;
color: blue;
transition: border-color 180ms linear;
}
.state-my-input--active {
.my-input__wrapper {
.my-input__label {
transform: translateY(-15px);
cursor: default;
}
.my-input__input {
border-bottom-color: blue;
}
}
}
JS:
import { Component, OnInit } from "@angular/core";
@Component({
selector: "my-input",
templateUrl: "./my-input.component.html",
styleUrls: ["./my-input.component.scss"]
})
export class MyInputComponent implements OnInit {
isFocused: boolean = false;
constructor() {}
ngOnInit() {}
}