0

I am trying to create custom Float label in Ionic but once field it woks . More then once Field all labels are floating when we click on any input Pls help me this

This is my HTML code:

Input.htmls

     <div class="form-field">
      <label [ngClass]="focused ? 'label-focused' : ''">Hellow</label>
    <input type="text" (focus)="focused = true" (blur)="onBlur($event)" />
  </div>

This is my SCSS code:

Input.scss

  .form-field {
  position: relative;
  margin-bottom: 1rem;
  height: 50px;

  label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    padding: 0 0.25rem;
    color: #61686f;
    font-size: 15px;
    transition: 0.3s;
    font-family: "Montserrat";
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    font-size: 15px;
    border: 2px solid #e7ebee;
    border-radius: 10px;
    outline: none;
    padding: 1rem;
    background: none;
    z-index: 1;
    color: #171c25;
    font-family: "Montserrat";
  }

  input:focus {
    border-color: #fa578e;
  }

  .label-focused {
    top: -0.4rem;
    left: 0.8rem;
    font-size: 14px;
    font-weight: 600;
    background-color: #fff;
    z-index: 10;
  }
}

This is my component typescript code: Input.ts

onBlur(event: any) {
const value = event.target.value;

if (!value) {
  this.focused = false;
}   }

floting lable image enter image description here

siva geddada
  • 1
  • 1
    Please make the question clearer. I'm not entirely sure what you're trying to achieve here...or what the problem is. – LoveDev Jun 30 '21 at 09:27
  • You can put your code in [CodePen](https://codepen.io/pen) or [jsFiddle](https://jsfiddle.net/) to help us understand what you are trying to do. Your sentences are very broken english. Take your time to explain what you want to do and what is not working. – Peter Krebs Jun 30 '21 at 10:33

0 Answers0