Custom CSS

[KrishnaPG]

Would it be possible to add "customizable classes" to the generated tags?

For example, for a matrix style of question, I would like to add a "table-hover" class to the table tag.

Not seeing a way to do this effectively, without having to resort to using javascript (addClass to the DOM node).

Did something like $("div#surveyContainer table.table").addClass("table-striped surveyTable"); but it is disappearing when the page next button is clicked.

How to handle these kind of scenarios.

[andrewtelnov]

Hi,
There is no built-in functionality to do it yet.
Do you use knockout or react version?
In react version, you may override mainClassName() property of the ReactSurveyQuestionmatrix component.

Thank you,
Andrew

[andrewtelnov]

I've tried to make a demo and does not like the result. There are a lot of code.
I will introduce the ability to change the class attribute via simple API.
I will be back soon.

Thank you,
Andrew

[KrishnaPG]

Thanks Andrew. That will be very helpful.

[andrewtelnov]

It is done.
Please take a look at these examples:
Knockout: http://surveyjs.org/examples/survey-customcss.html
React: http://surveyjs.org/examplesreact/survey-customcss.html
Having all css classes in one variable was a good idea.
It allows me to remove the code duplication in knockout templates and react classes. The code is better now. There is still a room for improvement of course :-)

Thank you,
Andrew

[KrishnaPG]

Thank you. Unfortunately it is giving the below error, while trying to use the latest compiled 'survey.bootstrap.js'

survey.bootstrap.js:4213 Uncaught ReferenceError: template is not defined

[andrewtelnov]

I have corrected the gulp.js file. It should be fine now.
PS: you could call gulp makedist the second time. It would compiled successful as well.

Thank you,
Andrew

[KrishnaPG]

Thanks - with latest build the error is gone.

It is also working fine applying the custom css (for paged, matrix kind of questions) for the table from page2 onwards. But on the first page, it is not applying the custom style when the page loads. (If you however click on previous and come back to first page, it then applies the style).

    var survey = new Survey.Survey(pagedQuestionnaire, htmlTagId);
    survey.onComplete.add(sendDataToServer);
    survey.onValidateQuestion.add(ensureAnswer);

    survey.css = {
        matrix: { root: "table blah table-striped" }, 
        navigationButton: "button btn-lg"
    };

Also, observed that the custom 'navigation Buttonstyle is not getting applied to thepreviousandnext,complete` buttons (not even after clicking next page).

This is how it is looking on the first page (with bootstrap and table-striped custom style, which was not applied)

If you click on next and comeback to first page, then you can see the table with custom style applied (still buttons not changed)

[andrewtelnov]

var survey = new Survey.Survey(pagedQuestionnaire, htmlTagId);

It actually renders the survey, the first page and navigation buttons, since the element parameter is set (htmlTagId).
You may fix it by adding the css parameter:

var css = {
        matrix: { root: "table blah table-striped" }, 
        navigationButton: "button btn-lg"
    };
var survey = new Survey.Survey(pagedQuestionnaire, htmlTagId, css);

or by calling the render method later:

survey = new Survey.Survey(pagedQuestionnaire);
survey.css = {
        matrix: { root: "table blah table-striped" }, 
        navigationButton: "button btn-lg"
    };
survey.render(htmlTagId);

[KrishnaPG]

Cool - worked like charm. Thanks much for your time and efforts on this.