Мой плавающий ярлык работает не так, как планировалось, уже опробован на другом фокусе ввода, но безуспешно - PullRequest
Новая
       49

Мой плавающий ярлык работает не так, как планировалось, уже опробован на другом фокусе ввода, но безуспешно

0 голосов
/ 04 мая 2020

, поэтому я использую автозаполнение primeng и сделал выпадающий список (одиночный селектор), и я не могу понять, на каком входе мне нужно сосредоточиться (или лучше сказать, какой является правильным), чтобы переместить мой ярлык вверх (плавающая метка), поскольку он вообще не движется, он остается

Это html моего единственного селектора: 

  <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>

И это s css: 

  .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;
    }
  }

И я подумал, что мне просто нужно сфокусироваться на вводе ui-autocomplete-input, чтобы переместить его вверх, но у меня ничего не получилось он

1 Ответ

1 голос
/ 05 мая 2020

PrimeNg предоставляет плавающие метки для всех компонентов. Вы можете использовать следующий синтаксис: 

<span class="ui-float-label">
        <p-autoComplete [(ngModel)]="country" inputId="float-input" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
            [minLength]="1"></p-autoComplete>
        <label for="float-input">Username</label>
</span>

См. https://github.com/primefaces/primeng/issues/4319

...