Custom CSS about survey-library HOT 9 CLOSED

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

from survey-library.

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

from survey-library.

Thanks Andrew. That will be very helpful.

from survey-library.

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

from survey-library.

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

from survey-library.

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

from survey-library.

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)

from survey-library.

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);

from survey-library.

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

from survey-library.