how to create a combobox css style

Vaadin 6 / 7 / 8 Framework UI
1

hi dears,

in my app there are a lot of notifications for knowledge. so i want to combine to all of them in a combobox.
there is a good sample in vaadin web page ( screenshot in attachment ), but i don’t know how to create it.

could you help me,

thanks for all suggest.
13565.png

2

It would definitely take some time to style a ComboBox to look like the Notifications popup. Perhaps I can give you some tips on how to get started.

First off, start with adding a custom style name.

ComboBox cb = new ComboBox("Style me"); cb.addStyleName("my-combobox"); Then you "
simply
" need to check the DOM structure of the ComboBox (I’d recommend the Developer Tools by Google Chrome), and style accordingly by adding style definitions in your .css file.

If you check the attached screenshot you’ll get a glance of the aforementioned structure. If you’re familiar with CSS then you just need to make sure that you match the correct class names etc in your definitions. For example, changing the background color of "
gwt-MenuItem
" could look like

 .v-filterselect-suggestpopup-my-combobox .gwt-MenuItem {
      background: beige;
  }

Hopefully that helps you to get started at least.

3

Attachment added.
13568.png

4

hi Joacim,

firstly thanks for suggest, i tried with css but i have no more time to spent, so i look for have an easy way to create it. i think there is no :slight_smile:

thanks for suggest again,

Best regards.