Search code examples
angularsassprimeng

My float label is not behaving as planned, already tried on different input focus but no success


so i'm using primeng's autocomplete and made a dropdown (single selector) and i can't seem to figure out to which input i need to focus on (or better said which is the right one) to move my label up (float label) since it isn't moving at all, it is staying

This is the html of my single selector:

  <div class="ui-float-label">
        <div class="ui-fluid">
            <p-autoComplete id="inputDropDown"
                            [suggestions]="selectionResults"
                            (completeMethod)="search($event)"
                            field="label"
                            [(ngModel)]="valueOfSingleSelection"
                            [minLength]="1"
                            [dropdown]="true"
                            [disabled]="!selectorProperties.enabled"
                            required
                            (onBlur)="setRequiredOnBlur()">

                <ng-template let-value pTemplate="selectedItem">
                    {{value.label}}
                </ng-template>
                <ng-template let-value pTemplate="item">
                    <div class="ui-helper-clearfix p-grid">
                        <div class="templateText p-col-12">{{ value.label }}</div>
                    </div>
                </ng-template>
            </p-autoComplete>
            <label for="inputDropDown" class="LapsFloatLabel">{{this.selectorProperties.labelMls}}</label>
        </div>
    </div>

And this is the scss:

  .LapsFloatLabel {
    font-size: $font-size-text-infos;
    color: $text-color-black;
    font-family: $font-style;
    position: absolute;
    pointer-events:none;
    top: 5px;
    left: 0;
    opacity:1;
    padding: 0 2px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }

.ui-fluid {
  input:focus {
    .LapsFloatLabel {
      top: -15px;
    }
  }

And i thought that i just need to set a focus on the ui-autocomplete-input to move it up but i had no success with it


Solution

  • Importing InputTextModule per avulanitin's answer at https://forum.primefaces.org/viewtopic.php?t=53209 solved the problem.