CODEWITHSUNDEEP
javacssfont-sizevaadin7caption
Steve Waters
Steve Waters

Reputation: 3548

How to make the font-size of the caption of a Vaadin Label smaller?

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

EDIT: Vikrant Thakur's answer works. In my case also this worked:

  .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");

Upvotes: 0

Views: 2864

Answers (2)

Vikrant Thakur
Vikrant Thakur

Reputation: 725

enter image description here

Here is the code for theme scss file:

@import "../valo/valo.scss";

@mixin mytheme {

    // Insert your own theme rules here
    .v-caption-mystyle {
        .v-captiontext {
            font-size: 13px;
            font-weight: bold;
            color: red;
        }
    }

    @include valo;
}

And, here is the Java code:

Label label = new Label("This is the label text");
label.setCaption("This is the label caption");
label.addStyleName("mystyle");

Upvotes: 1

Chris M
Chris M

Reputation: 1068

I'm assuming PLabel is either a typo or a custom implementation of the Label class. If that is the case, it's simply that even though you're setting the caption on the Label class, it's CSS class is v-label. So your CSS should look like this.

.v-caption-mystyle {
    font-size: 13px !important;
    font-weight: bold;
    color: $dark-grey;
  }

Upvotes: 1

Related Questions