Java Vaadin组合框将文本字段宽度设置为0(CSS阴影dom)
我使用一个Vaadin组合框来创建一个下拉菜单,用户可以在其中设置一个状态,该状态将显示在网页的另一个元素中。所以我真的不需要组合框的文本字段部分(图像中的蓝线) 在浏览器中手动将宽度设置为0可以得到完美的结果(没有可见的线条,没有可用于聚焦的文本输入区域),但是我无法使用代码实现这一点。请帮帮我 我在中使用了这个示例(请参见vaadin text field styles.css),它更改了我网页上的所有组合框。当前状态如下所示:Java Vaadin组合框将文本字段宽度设置为0(CSS阴影dom),java,css,vaadin,vaadin-flow,Java,Css,Vaadin,Vaadin Flow,我使用一个Vaadin组合框来创建一个下拉菜单,用户可以在其中设置一个状态,该状态将显示在网页的另一个元素中。所以我真的不需要组合框的文本字段部分(图像中的蓝线) 在浏览器中手动将宽度设置为0可以得到完美的结果(没有可见的线条,没有可用于聚焦的文本输入区域),但是我无法使用代码实现这一点。请帮帮我 我在中使用了这个示例(请参见vaadin text field styles.css),它更改了我网页上的所有组合框。当前状态如下所示: //Java-code: comboBox.addClass
//Java-code:
comboBox.addClassName("RemoveTextField");
CSS规则没有使用,我想问题是.host选择器没有像我想的那样工作。由于我是一名CSS noob,请告诉我如何在阴影dom之外的元素中使用选择器。请参阅结尾以获得替代解决方案。 处理嵌套阴影根时,样式设置有点棘手。部分
输入字段
位于vaadin文本字段
的阴影根中,该阴影根位于vaadin组合框
的阴影根中。因此,它不能从组合框中设置样式
您可以为文本字段创建一些样式,如文本样式。css
:
:host([theme="my-combo"]) [part="input-field"] {
width: 0;
}
[part=“输入字段”]{
宽度:0;
}
接下来,通过将此注释添加到流视图,可以将其应用于所有文本字段:
@CssImport(value=“text styles.css”,themeFor=“vaadin text field”)
现在,所有输入字段的宽度都为零。为了使其仅应用于组合框中的文本字段,您可以在其上设置主题属性:
myComboBox.getElement().setAttribute(“主题”、“我的组合”)代码>
然后您可以更新您的文本样式。css
:
:host([theme="my-combo"]) [part="input-field"] {
width: 0;
}
那么这是如何工作的呢?
所有Vaadin web组件都实现了一个ThemableMixin
,它可以做以下几件事:
它使您能够使用@CssImport
中的themeFor=“…”
将样式注入到Vaadin组件的阴影根中
它将在组件上设置的任何主题
属性传播到阴影根中的任何子组件
在浏览器开发工具中,您将看到主题
属性已传播到vaadin文本字段
,因此我们可以使用它来限制样式的范围仅传播主题属性,它不适用于类、ID等
如果您查看突出显示的样式
标记,您还会发现文本样式.css
的内容已经被注入其中(尽管内容可能太长,devtools无法显示)
替代解决方案
组合框可能不是最好的组件。看看or。完美的答案,非常感谢!所以“主题”是通过影子DOM访问transcent属性的方法,这很好。感谢您提供的替代解决方案。在我的情况下,我必须使用组合框(否则我将不得不将所有样式从组合框复制到例如ContextMenu),但对于其他人,您的建议应该是更简单的解决方案。