VAADIN Reverse Label with CSS

Here is a simple example how to use CSS to change the visual representation of Vaadin components.

The com.vaadin.ui.Label component have a caption and a icon, i.e.  „[I] Caption“.

But I need a label like this „Caption [I]“. This could be done with the following CSS:

.v-caption-reverseLabel {
float: left;
}
.v-caption-reverseLabel .v-icon {
float: right;
margin: 0px 2px 0px 2px;
}
.v-caption-reverseLabel .v-captiontext {
float: right;
}

final Label label = new Label();
label.setStyleName("reverseLabel");
label.setCaption("Foobar");
label.setIcon(new ThemeResource("img/info.gif"));

Advertisements