Set style to GWT ComboBox items

Question

I need to change a color of SOME comboBox elements. I read this topic: Set style to GWT ListBox items

However its not the same. Because when I try to implement this:

SelectElement selectElement = SelectElement.as(combo.getElement());
         NodeList<OptionElement> options = selectElement.getOptions();

         for (int i = 0; i < options.getLength(); i++) {
              options.getItem(i).getStyle().setColor("#FF0000");
         }

In the first line compiler returns error: java.lang.AssertionError: null

I started to think there is no posibility to change color, or am I wrong?

The result should be like this Volvo option: http://bustas.lrytas.lt/nekilnojamasis-turtas/geda-vilniaus-merams-ne-vienas-neissprendzia-opiausios-bedos.htm

score 0 · Accepted Answer · edited May 23 '17 at 11:52

I believe you can use the .setClassName("my_css_class") to style the SelectElement.

Add the css to your html something like this:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   }

You will also find a lot of information on styling using css.

If you're using any other GWT widget, ie a ListBox, you can use .setStyleName("my_class_name"). You can wrap a GWT ListBox to a SelectElement too and style it.

ListBox listBox = ListBox.wrap(mySelectElement);
listBox.setStyleName("my_css_class");

See here for more: https://bavotasan.com/2011/style-select-box-using-only-css/

EDIT: Some excellent examples for using css styling drop down boxes here: How to style a <select> dropdown with CSS only without JavaScript?

EDIT 2 Custom styling of a dropdown box

Styling individual items of a ListBox or dropdown box.

CSS:

    .selectbox {
        border: 3px;
        border-radius: 5px;
        padding: 4px;
        background-color: #44f;
    }
    .optioncss {
        background-color: #888;
    }

HTML select item for example

    <select id="selectbox" class="selectbox">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>

GWT client code to re-style items

    ListBox select = ListBox.wrap(RootPanel.get("selectbox").getElement());
    SelectElement elem = (SelectElement)select.getElement().cast();
    elem.getOptions().getItem(0).setDisabled(true);
    elem.getOptions().getItem(1).setClassName("optioncss")

Thanks for help. But I need to do everything with 'Combobox' not a 'ListBox' object. — Dovydas Gusarovas, Dec 09 '16 at 11:00
But you can get each element in Java . Something like this: `combobox.getItemsList()` to set style for each element. The result that I want to reach is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled (VOLVO example) — Dovydas Gusarovas, Dec 09 '16 at 11:24
Just updated answer with a link to styling drop down boxes. To enable and disable individual options .setDisabled(true) (from http://www.gwtproject.org/javadoc/latest/com/google/gwt/dom/client/OptionElement.html) — WLGfx, Dec 09 '16 at 12:00
Yes that is exactly what i need. Can you provide me an example? However, thanks for help, much appreciate! — Dovydas Gusarovas, Dec 09 '16 at 12:44
Added working code to show individual styling of items and disabling. — WLGfx, Dec 09 '16 at 13:21

Set style to GWT ComboBox items

1 Answers1