Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Fredrik on Oct 28, 2009 08:37
open dhtmlx forum
dhtmlxCombo - option style issues

Hi

I set the options style with the addOption script function.
I set different background colors for different options and it works nice.

However, I would like the input box (at the top) to get the same style (background color) as the selected option. Is this possible? I have tried to modify the dhtmlxcombo.js but I am struggeling.

Another issue is that the styles that are set on the options overrides the styles in the .css file so the background color won't change when hovering an option. The ability to set different style classes on the option elements should work better but I can not figure out how to do that.

Please advice.
Answer posted by Alex (support) on Oct 28, 2009 09:13

Hello, 

>> I would like the input box (at the top) to get the same style (background color) as the selected option

the DOMelem_input internal property is object of combo input.

So, you can try to use the following method to change the input style depending on style of selected option:

combo.addOption([{"value":1,"text":"option 1","css":"background-color:red"},{"value":2,"text":"option 2","css":"background-color:blue"}])

combo.attachEvent("onChange",function(){
   var value = this.getActualValue();
   this.DOMelem_input.style.cssText = "width:"+this.DOMelem_input.style.width+";"+this.getOption(value).css;
})

>> the styles that are set on the options overrides the styles in the .css file so the background color won't change when hovering an option

try to redefine dhx_selected_option class (it is set in the dhtmlxcombo.css) as follows:

.dhx_selected_option{
   background-color:navy !important;
   color:white;
}