How to style the caption of a Label in css?


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"));
postOfficeLabel = new Label(currentAddress.getPostOffice());
postOfficeLabel.setCaption("Post office"));


that seems to work for me. Did you remember to recompile your theme after that?



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());

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]




[/layout slot]

thank you