Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to style the caption of a Label in css?
Hi!
Title says it all.
I tried the following:
I know how to add styles in Vaadin and I've done multiple stylings in my css and added the style in the code succesfully, but this one eludes me.
I tried the following:
in the css I have the following style:
.v-caption-mystyle .v-captiontext {
font-size: 13px !important;
font-weight: bold;
color: $dark-grey;
}
In the code I try to set it in two following ways and nothing happens:
postalCodeLabel= new Label(currentAddress.getPostalCode());
postalCodeLabel.setCaption("Postal code"));
postalCodeLabel.addStyleName("v-caption-mystyle");
postOfficeLabel = new Label(currentAddress.getPostOffice());
postOfficeLabel.addStyleName("v-caption-mystyle");
postOfficeLabel.setCaption("Post office"));
Hi,
that seems to work for me. Did you remember to recompile your theme after that?
-Olli
Olli Tietäväinen: Hi,
that seems to work for me. Did you remember to recompile your theme after that?
-Olli
Hi!
I managed to solve it. The problem was in the naming that I should use in the Java code for the addStyleName(parameter). Not quite sure why it works like this, but here's what I did:
.v-caption-invoiceaddress-label-caption .v-captiontext {
font-size: 13px !important;
font-weight: bold;
color: $dark-grey;
}
And in the Java:
postalCodeLabel = new Label(currentAddress.getPostalCode());
postalCodeLabel.setCaption("myCaption"));
postalCodeLabel.addStyleName("invoiceaddress-label-caption");
Ah, yeah, I should have looked at your code more closer instead of writing my own. The caption is not actually under the label's main element (which you can target directly with .[your style name], but it's a separate div, so you need to use the .v-caption-[your stylel name] to access the caption element.
Something like this:
[layout slot]
[caption]
[captiontext]
[label]
[/layout slot]