Umberto4
(Umberto Festa)
April 15, 2019, 12:35pm
1
Hello,
I’m using Vaadin 13.0.0 . I have a text field with a Label
TextField myTextField = new TextField();
myTextField.setLabel("My Field");
how to change the label style? I’m trying to make it bold. I tried with no success:
myTextField.getElement().getStyle().set("fontWeight","bold");
Thomas
(Thomas Mattsson)
April 18, 2019, 9:37am
2
Hi! With Vaadin 10+, all components are implemented on he Web Component standards, and as such have different rules for styling. If you have a shared-styles.html file already in your project, add this inside the custom-style tag:
<dom-module id="custom-textfield" theme-for="vaadin-text-field">
<template>
<style>
[part~="label"]
{
font-weight: bold;
}
</style>
</template>
</dom-module>
Everthing inside the part block is regular CSS, it’s just the packaging that’s new
If you don’t have that particular file, create one under src/main/webapp/frontend/styles, with this content:
<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">
<custom-style>
<dom-module id="custom-textfield" theme-for="vaadin-text-field">
<template>
<style>
[part~="label"]
{
color: red;
}
</style>
</template>
</dom-module>
</custom-style>
You’ll also need this annotation on your root (main) layout:
@HtmlImport("frontend://styles/shared-styles.html")
Umberto4
(Umberto Festa)
April 18, 2019, 9:58am
3
this worked like a charm! thank you!
and now the fun part: I have only some labels to make bold some labels have to be not bold.
how to manage this?
Thomas
(Thomas Mattsson)
April 18, 2019, 10:27am
4
More fun indeed!
TextField tf = new TextField();
tf.setLabel("bold?");
// tf.setThemeName("boldlabel");
add(tf);
:host([theme~="boldlabel"]
) [part~="label"]
{
That way the css only targets textfields with the ‘boldlabel’ theme.
Umberto4
(Umberto Festa)
April 18, 2019, 1:27pm
5
And this also worked fine! Thank you!
BUT
This is the last question I promise!
I also have a ComboBox and a DatePicker that require a bold label, I can’t find setThemeName on them… ho wo do the last trick?
Kaspar4
(Kaspar Scherrer)
April 18, 2019, 1:34pm
6
You can add a class name to those instead.
ComboBox cb = new ComboBox();
cb.addClassName("bold-label");
<dom-module id="bold-combo-box" theme-for="vaadin-combo-box">
<template>
<style>
:host(.bold-label) [part~="label"]
{
font-weight: bold;
}
</style>
</template>
</dom-module>