Changing the caption color

I have a ComboBox. How do I change the color of the caption? What is the CSS for that?

ComboBox combo = ...;
combo.addStyleName("mystyle");

.v-caption-mystyle {
color: ...
}

Should work OK.

Thanks.

If I add the ComboBox to the Form it doesn't work! Otherwise, it works.
Do I have to do anything else when adding to the Form?

Using Firebug it should be easy to find out if the style is not applied to the element, if another style overrides it or what the problem really is. Have a look at getfirebug.com if you do not have it installed already. Using the inspector you can see what styles are applied to the element and maybe find out why the style you use is not applied.

Much easier than trying to guess what is wrong :)

I checked with firebug. The added style is not showing up.

Here is the code:

package com.bilogicsys.htest;

import com.vaadin.ui.*;
import java.util.Vector;

public class Application extends com.vaadin.Application {

        public Application() {
        }

        public void init() {
                Window w;
                setMainWindow(w = new Window());
                setTheme("altemis");
                Vector<String> list = new Vector<String>();
                list.add("One");
                list.add("Two");
                ComboBox cb = new ComboBox("My Combo", list);
                cb.addStyleName("mystyle");
                Form form = new Form();
                form.addField("cb", cb);
                w.addComponent(form);
        }
}

Caption is drawn with:

<div class="v-caption"><span>My Combo</span></div

Hi,

You (correctly) added the style to the combo box; the caption is a child element of the combo box.

I think you'll find you need to use a css selector such as this

.mystyle .v-caption {
    color:red;
}

Regards,

Charles.

Charles Anthony: -- the caption is a child element of the combo box..

Not exactly true. Depends on what caption we speak of. The generic captions rendered by some layouts are never contained inside the actual component's element (unless the component decides to render the caption itself, like Button and Panel for example).

If the style works when you use some other container than Form, e.g. VerticalLayout, my best guess is that FormLayout (default layout used inside Form) doesn't copy the style names from the component to the caption beside it like other core layouts do. The fault is somewhere in VFormLayout.java.

Ah - my bad.

Sorry!

No worries Charles, an easy mistake to make.

I just checked, and the fault is indeed in VFormLayout. It has an internal implementation for the captions (other layouts use VCaption class), which does not copy the component's style names to its own element.

Here's how it's done in VCaption: VCaption.java#L81 and here's the place where it should be done in the VFormLayout: VFormLayout.java#L281

Made a ticket about this issue: #4997.

Thanks for the report!

Thanks Jouni.
Yea, it works in layouts other than Form's.