Problem With ComboBox and ListModelPropertyEditor

[Elly]

I'm trying to create a ComboBox whose list items will be in different colors, and whose input box will be in the same color as the selected list item, something like this:

comboboxbetter.JPG
The ComboBox Without ListModePropertyEditor

The value in the input box is how I provide the values of the list items; the specification of class controls the color. To avoid having the HTML visible in the input box, I add a ListModePropertyEditor which supplies the visible text and sets the CSS class for the input box instead of surrounding the text with <div> tags.

But adding the ListModePropertyEditor gives me a combo box that looks like this:


comboboxbad.JPG
The ComboBox With ListModePropertyEditor

It seems the vertical space allocated to each list item has been reduced to a narrow band not even wide enough to show the text.

Is it possible to display the text properly in both locations?

By the way: I'm actually hoping to change the background color of each item rather than the foreground. Adding a "background" attribute to the CSS style works for the list items, but not for the input box. Is it possible to have both?

Here is the code, starting with the definition of the model:

 
private class State extends BaseModelData {
    private State(String stateName, String color) {
        super();
        this.set("name", stateName);
        this.set("color", color);
        this.set("rendered",
            "<div class=\"" + color + "\">" 
            + stateName
            + "</div>"); 
    }
    private String getName() {
        return this.get("name");
    }
    private String getColor() {
        return this.get("color");
    }
}
 
/*********************************************************/
 
    public void onModuleLoad() {
        VerticalPanel vp = new VerticalPanel(); 
        vp.setSpacing(10); 
        State alabama = new State("Alabama", "blue");
        State alaska = new State("Alaska", "orange");
        State michigan = new State("Michigan", "green");
        State wyoming = new State("Wyoming", "aqua");
        final ListStore<State> states = new ListStore<State>(); 
        states.add(alabama);
        states.add(alaska);
        states.add(michigan);
        states.add(wyoming);
 
        final ComboBox<State> combo = new ComboBox<State>() {
            @Override
            protected void onSelect(State model, int index) {
                super.onSelect(model, index);
            }
        }; 
 
        combo.setDisplayField("rendered");
        combo.setWidth(150); 
        combo.setStore(states); 
        combo.setTypeAhead(false); 
        combo.setTriggerAction(TriggerAction.ALL);
        combo.setEditable(false);
        combo.setValue(michigan);
 
        combo.setPropertyEditor(new ListModelPropertyEditor<State>() {
            public String getStringValue(State value) {
                // Remove any active style taken from the State model, then replace
                // with the style of the current selected State.
                for (State state : states.getModels()) {
                    combo.removeInputStyleName(state.getColor());
                }
                combo.addInputStyleName(value.getColor());
                return value.get("name");
            }
        });
 
        vp.add(combo); 
        RootPanel.get().add(vp);
}

[anahuacv]

No answer yet, and I'm facing the same shrinking problem. Is there anyone willing to help? Thanks.