Survey-library: Custom CSS class for "dropdown" does not apply

[adamfoley]

Are you requesting a feature, reporting a bug or ask a question?

bug

What is the current behavior?

Custom css class for dropdown question not applied

What is the expected behavior?

Class(es) specified in dropdown property applied to select elements

How would you reproduce the current behavior (if this is a bug)?

Create survey with dropdown question, use css: {"dropdown":"form-control"} and observe markup does not have class "form-control" applied

Specify your

• browser: Chrome (Windows/Mac)
• browser version: 58.0.3029.81 Win / 57.0.2987.133 (64-bit) Mac
• surveyjs platform (angular or react or jquery or knockout or vue): angular
• surveyjs version: [email protected]

[dmitrykurmanov]

@adamfoley, hello! May be you should use root property:

var myCss = { dropdown: {root: "form-control"} };

Could you try it please?

[adamfoley]

The root property does work, but this adds a class to the parent div of select. I also tried item, select and dropdown properties, but none of them seem to work. I also tried to duplicate this in plunker using jquery, but the custom CSS applies to the select element as expected in that case. Could my problem by specific to my survey model?

[dmitrykurmanov]

@adamfoley as I understand you have the plunk with survey-jquery and it works. And jquery-angular doesn't. Am I right? Could you share your non working example?

[adamfoley]

Here is a plunk demonstrating: https://plnkr.co/edit/Tmra6aRmb4JKWBfRetiZ

[dmitrykurmanov]

@adamfoley thanks, now I see the problem. I think you should use control property:
https://plnkr.co/edit/YSNJTfvqs52L4aGAcpv5?p=preview is it ok for you ?

var css = { dropdown: {control: "form-group"} };

[adamfoley]

Yes, that will work, thanks! Consider adding the control property to the overridable classes in the example here: http://surveyjs.org/examples/angular/survey-customcss.html

The availability of control property was unknown to me, but maybe I just didn't know where to look for reference to it.

Thanks again.

[dmitrykurmanov]

@adamfoley yes we don't have this property in our example, thanks, we'll add it.

you can find all properties here: https://github.com/surveyjs/surveyjs/blob/master/src/defaultCss/cssbootstrap.ts

and we are working on documentation :)