How to apply css margins on a label

Vaadin 6 / 7 / 8
1

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.

2

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