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

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]

thank you