Set style to GWT ListBox items

Question

Is there a way to apply css style to GWT ListBox drop-down menu (ex: change color of some items) I can't do it by setting a style to whole ListBox because i wanna different style for each item! Result will be like that:

<select class="style1" id="test">
  <option class="style2" value="">&nbsp;</option>
  <option class="style2" value="AL">Alabama</option>
  <option class="style6" value="AK">Alaska</option>
  <option class="style6" value="AZ" class="red">Arizona</option>
  <option class="style6" value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
 </select>

score 5 · Answer 1 · answered Dec 28 '13 at 15:23

5

Try with options.getItem(i).getStyle().setColor("#FF0000");

ListBox listBox = new ListBox();
//Add item to listBox.
SelectElement selectElement = SelectElement.as(listBox.getElement());
NodeList<OptionElement> options = selectElement.getOptions();

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

answered Dec 28 '13 at 15:23

Rakesh KR

6,357
5
40
55

that result: but no color changed :s – Smile2Life Dec 28 '13 at 21:55
the solution works fine @Smile2Life ,try clearing cache or use ctrl+f5 also try using setBackgrundColor to know the difference more clearly – Onkar Dec 31 '13 at 13:37

score 0 · Answer 2 · answered Dec 28 '13 at 22:09

At some point, I had researched this exact same question. I could not find a way to style ListBox elements, only the overall list.

In my research, I recall seeing other GWT-based libaries with more sophisticated widgets that had this embedded capability (e.g., GXT or Sencha if I recall correctly).

From a raw GWT perspective, I believe one way to go would be to use CellList.

score 0 · Answer 3 · answered Dec 30 '13 at 11:55

Even I tried this a long time back. I did not find any solutions to make this work with only GWT.

How ever, there are few 3rd party JS frameworks which allows you to do it. You can check out the following links

http://silviomoreto.github.io/bootstrap-select/3/

http://brianreavis.github.io/selectize.js/

score 0 · Answer 4 · answered Apr 05 '14 at 21:14

0

Just style that badboy with css:

.my_select { stuff for control here } .my_select option { color: #fff; background-color: #000 }

answered Apr 05 '14 at 21:14

Evan Ruff

582
7
21

Set style to GWT ListBox items

4 Answers4

Linked