Background color of a Label...

Hi all,

I have a small problem of setting the background color of a label.

I have gone through the forum already & there are solutions to achieve this by using Themes.
Unfortunately I’m totally new to Themes… :wacko:

Can anyone help me to achieve this please?

Thanks in advance,

Hi, Asela.

To create you own theme, you need create a folder in WebContent/VAADIN/themes with a name of your style, e.g. my_theme, and styles.css into that folder (WebContent/VAADIN/themes/my_theme/styles.css):

@import url(../base/styles.css); 
.v-label {
background: #ffffc0; /* Pale yellow */

then you need to set this theme for your application in init() method:

public class MyApplication extends Application {
	public void init() {

That’s it.

for details.

Hi Gregory,

Thanks for the reply & it works fine.

Thanks again.


This solution doesn’t seem to work anymore (with Vaadin 6.8). I’m no guru with CSS, but when I dig the html with Firebug, it shows:

<div style="height: 18px; width: 150px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-label" style="width: 150px;">

(I have the Label as the first component in a Vertical Layout)

It seems to me, that the background color should be applied to the parent div and not the div with v-label class.

How can I do that?

Now that i dug deeper, it seems that it’s the xhtml content in my label that messes things up.

<div style="float: left; margin-left: 0px;">
<div class="v-label" style="width: 150px;">
<span style="float:left">
Left aligned label text
<span style="float:right">right aligned label text</span>

I don’t know why, but if i give the label a specific height in pixels, it works. Otherwise not :slight_smile:

To avoid this height hardcoding, I did this change:

<div class="v-label" style="width: 150px;">
Left aligned text
<span style="float:right">right aligned text</span>

And now it’s ok :slight_smile:


You can also add the background color directly using the java code like this :

myLabel =
new Label
(“<p style="