Kendo: 保持 font-size 为 floatingLabel

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。试试这个，看看它是否有效

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

Answer 3

我终于解决了！

Here there is a stackblitz 带有答案和 奖励曲目：如何旋转占位符！

主要思想是检测字段何时为 filled/focused/selected 并应用以下 css class:

  .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

Kendo: 保持 font-size 为 floatingLabel

Kendo: Keep font-size of floatingLabel

css

kendo-ui-angular2

angular