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 apply css margins on a label
Hi All,
I'm trying to put different labels in a CssLayout the problem that label wasn't taken the setted margin.
Here's what i wrote:
private Component productSettingsLabel = new Label();
CssLayout layoutRight = new CssLayout() {
@Override
protected String getCss(Component c) {
return "margin-top: 8px; margin-left: 8px";
}
}
layoutRight.addComponent(productSettingsLabel);
productSettingsLabel.setCaption("Product settings");
The specified margins are not applied on the label.
Here's what i get when i inspect the added text with firebug:
<div class="v-caption v-caption-searcher-title">
<div class="v-captiontext">Product settings</div>
<div class="v-caption-clearelem"></div>
</div>
A blank horizontal line is displayed under the label here's its inspection result:
<div class="v-label v-label-searcher-title
searcher-title" style="margin-top: 8px; margin-left: 8px; width: 434px;"> </div>
So the caption is seperated from the label. And since the caption is not considered as a "Component" (in the overrided getCss() method), the style was not applied on it.
I tried to add the "display: inline-block;" to the used style. but it didn't work for me.
I hope i gave all the details.
Hi,
I know it's not exactly a response to your stated problem, but generally you'd want to use the Label's value property (which you can set as the Label's constructor parameter or with productSettingsLabel.setValue()). The caption is a property is inherited from AbstractComponent and it's more like an additional textual description you can add to any Component, like a TextField or an Image.
If you do want to use both the caption and the value of the Label, take a look at the Book of Vaadin section about common component features, where you'll find the CSS selectors you can use for the caption.
Hope this helps,
Olli Tietäväinen
Vaadin Developer