Combobox css styles

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I need to display the items in a combobox with different styles, ones bolded and others normal.
Is there an easy way to do this?

2

Not currently possible, but IMO should be.
Worth a ticket
, please make one and the dev team will decide when to implement it.

If you wish to try and implement it yourself (the dev team loves good patches), the place you need to modify on the client-side is here:
VFilterSelect.java#90
.

On the server-side, copy the item style generator pattern used by both Tree and Table.

3

Hi all,

is it still not possible to set a specific css style for
individual
 combobox items.

thanks in advance

Johannes

4

Sigh… still seems like so. I don’t know if there’s still even a ticket about the issue.

5

Hi Jouni,

is there any update on the issue?


https://github.com/vaadin/framework/issues/5343

regards

Johannes

6

Thanks for asking. No, not as far as I know, it’s still not moving forward.

I’m not sure if that will be done for the current combo box version. We are planning to integrate the new polymer web component combo box instaead (), and it allows you to specify the template used for the items. Not sure how that should be translated to a server side API, it remains to be seen.

7

This ComboBox gets individual background shades using a style generator. I haven’t looked for the css to style the text, but would it not be similar?

        typeSelector.setStyleGenerator(item -> {
             return "Simulator".equals(item) ? "ownermaintpink" : "inserviceblue";
        });
.v-filterselect-item-inserviceblue {
    @include combobox-item-style (#EDFEFF);
}
.v-filterselect-item-ownermaintpink {
    @include combobox-item-style (#FFEDED);
}
8

Thank you both for your quick replies!

@Jouni: I’m looking forward to using the polymer components as they offer many great new possibilities.

@Steve I tried your example with vaadin 8 and it works flawlessly. Its exactly what i was looking for.

In case that someone is facing a similar problem in the future. Here is a small example of my use case:

        ComboBox<Customer> customers = new ComboBox<>();
        customers.setItemCaptionGenerator(Customer::getName);
        customers.setItems(new Customer("active customer", true), new Customer("inactive customer", false));
        customers.setStyleGenerator(customer -> {
            return customer.isActive() ? "" : "inactive";
        });

[code]
public class Customer {
private final String name;
private final boolean isActive;

    public Customer(String name, boolean isActive) {
        this.name = name;
        this.isActive = isActive;
    }

    public String getName() {
        return name;
    }

    public boolean isActive() {
        return isActive;
    }
}

[/code]CSS:

.v-filterselect-item-inactive { text-decoration: line-through; }
The github issue can probably be closed now.

https://github.com/vaadin/framework/issues/5343

Thanks again for your help!

regards

Johannes

9

I added comments to the issue regarding the web component .