当我使用floatingLabel
时,标签移至输入字段上方,但标签的大小减小了,我希望文本保持原始大小(或将其更改为其他任何大小)。
我的工作:使用以下代码:
<kendo-textbox-container floatingLabel="First name">
<input kendoTextBox />
</kendo-textbox-container>
我获得:
当我写的时候,我得到:
如您所见,字体大小减小了。
我检查了代码,发现有一个转换,但是如果我写
.k-textbox-container > .k-label {
background: purple;
transform: scale(1);
}
在css
中,字体大小不会更改,但也不会在文本框中移动。
能帮我吗?
答案 0 :(得分: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 {
}
答案 1 :(得分:0)
看起来它与转换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 {
}
答案 2 :(得分:0)
我终于解决了!
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