剑道：保持floatLabel的字体大小

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及其答案和奖励轨迹：如何旋转占位符！

主要思想是检测字段何时被填充/聚焦/选中并应用以下CSS类：

require 'open3'
_, stderr, status = capture3(PGPASSWORD="#{source_postgres_password}" pg_dump -U "#{source_postgres_username}" -h "#{source_host}" "#{source_database_name}" > "#{store_backup_file_path}/#{timestamp}/#{source_database_name}".sql)
puts "Postgres error: #{stderr}"  unless status.error 

一个功能

  .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; } 文件中的

用于了解该字段是否已填充。

享受它并... 别错过旋转木马！ :-D