Good day,
I am using the igCombo combobox throught my application, but am having trouble with the styling. I am using IgniteUI v13.2.20132.1010
I am overriding the [ui-igcombo ui-state-default ui-widget ui-corner-all] style for the span that is generated for the igCombo, but nothing happens. I have tried to add the class to the igCombo using jQuery's addClass() method, but also no luck. It seems that whatever I do, the Infragistics styles seem to be the default.
I am trying to override the dropdown by using the following:
.ui-igcombo .ui-state-default .ui-widget .ui-corner-all { background: url(../images/icon-fail.png) no-repeat right center #ffebef !important; color: #480000 !important; width: 100% !important; }
Nothing works.
As an FYI, I am using an ASP DropDownList for the control that the igCombo is being applied to, could this be an issue?
I just tested with using an <html> input and div, but none of them worked with my custom style.
Hi, Eduard.
The problem can be related to the CSS Specifity or maybe the class that you need is different. Can you please try to remove the spaces and concatenate the classes. For example when I inspect the following CSS rule inside the igCombo:
then if I need to override the default state my code should be:
This works for me. In your code the two classes are separated with space and this change the things. Following CSS Specificity rules the .ui-igcombo.ui-state-default is stronger than .ui-igcombo .ui-state-default and it won't be overwritten. When you are using jQuery addClass() method, you are adding them with space, which means different classes - so this will not help you.
If this is not a problem, because you are using !important, which should work, this means another class should be used. Can you tell me what specifically you want to achieve and if possible share some code. I will investigate to ensure it is not a bug and propose you valid solution.
I hope that my post was useful for you and I will wait for your feedback.
Best regards,
Nikolay Alipiev
I'm checking if you were able to resolve your issue. Don't hesitate to ask me if you have more questions.
Best regards, Nikolay Alipiev
Hi,
Yes, thank you.
I'm glad to hear that. Thank you again for using our products.
Hi Nikolay,
I am experiencing a weird problem in IE 10. When I overrode the styles as you suggested, the majority of the control still has a white background and the far right of the control has the style I applied, including the image.
I am including my style here that I apply:
.ui-igcombo.ui-state-hover, .ui-igcombo.ui-state-default { background: url(../../images/icon-fail.png) no-repeat right center #ffebef !important; color: #000000; }
Would it be possible to assist? I've tried everything from using a DropDownList (ASP) to an input, but the result stays the same.
Thanks,
If I understood your question, you want to change the background of the combo, correct me if I'm wrong. You can do this by using the following class: ".ui-igcombo-field". You can try using it and if you have some problems or questions, don't hesitate to ask me.
Nikolay