Kendo: сохранить размер шрифта плавающей метки

Question

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

Что я делаю: со следующим кодом:

  <kendo-textbox-container floatingLabel="First name">
    <input kendoTextBox />
  </kendo-textbox-container>

Я получаю:

И когда я пишу в нем, я получаю:

Как видите, размер шрифта уменьшен.

Я проверил код и увидел, что есть преобразование, но если я напишу

  .k-textbox-container > .k-label {
    background: purple;
    transform: scale(1);
  }

в css размер шрифта не изменяется, но он также не перемещается в текстовом поле.

Не могли бы вы помочь мне, пожалуйста?

Answer 1

вы можете попробовать следующий код и установить нужный размер шрифта вместо 30px.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-textbox-container floatingLabel="First name">
      <input kendoTextBox />
    </kendo-textbox-container>
  `,
  styles: ['.k-state-focused{font-size: 30px !important;}']
})
export class AppComponent {
}

Answer 2

Я наконец-то решил это!

Здесь есть блик стека с ответом и бонусный трек : как выровнять заполнитель!

Основная идея состоит в том, чтобы определить, когда поле заполнено / сфокусировано / выделено, и применить следующий класс CSS:

  .placeholder.selected,
  .k-textbox:focus + .placeholder,
  .shifted-placeholder {
    transform: translate3d(-10px, -75%, 0);
    opacity: 1;
    z-index: 0;
  }

Функция

  onInput(value: any): void {
    this.value = value;
  }

в файле .ts используется, чтобы узнать, заполнено ли поле или нет.

Наслаждайся этим и ... не пропусти пируэт ! : -D

Answer 3

Похоже, это как-то связано с преобразованием CSS.Попробуйте это и посмотрите, работает ли оно

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
     <kendo-textbox-container floatingLabel="First name">
      <input kendoTextBox />
    </kendo-textbox-container>
    `,
  styles: ['.k-textbox-container > .k-label{transform: translate(1px, -3px) translate(-1px, -1.0714285714em) translate(-12.5%, -9.375%) scale(1);}']
})

export class AppComponent {
}