Setup your own css classes for all html elements and customize the markup, Reactjs Survey Library Example

Css Сlasses

Edit in Plunker

Open in new window

Export Pdf

Result
JavaScript
HTML
CSS
QR Code


                        
        
            Survey.StylesManager.applyTheme("orange");
        


            
                var json = {
  "questions": [
    {
      "type": "radiogroup",
      "name": "one",
      "title": "Radiogroup question (green)",
      "choices": [ "Yes", "No" ]
    },
    {
      "type": "checkbox",
      "name": "two",
      "title": "Checkbox question (orange)",
      "choices": [ "One", "Two" ]
    },
    {
      "type": "radiogroup",
      "name": "three",
      "title": "Required question (red title)",
      "isRequired": true,
      "choices": [ "Yes", "No" ]
    }

  ]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
            });
        
survey.onUpdateQuestionCssClasses.add(function(survey, options) {
    var classes = options.cssClasses

    classes.root = "sq-root";
        classes.title = "sq-title"
        classes.item = "sq-item";
        classes.label = "sq-label";
            

    if (options.question.isRequired) {
        classes.title += " sq-title-required";
        classes.root += " sq-root-required";
    }

    if (options.question.getType() === "checkbox") {
        classes.root += " sq-root-cb";
    }
});
        
            ReactDOM.render(<Survey.Survey model={survey}  />, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Setup your own css classes for all html elements and customize the markup, Reactjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="https://surveyjs.azureedge.net/1.7.18/survey.react.js"></script>
<link href="https://surveyjs.azureedge.net/1.7.18/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>


.sv_qstn .sq-root {
  border: 1px solid gray;
  border-left: 4px solid #18a689;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 30px;
}

.sv_qstn .sq-root-cb {
  border-left: 4px solid orange;
}

.sq-title {
  font-size: 20px;
  margin-left: 20px;
}

.sq-title-required {
  color: red;
}

.sq-label {
  margin-left: 30px;
}

.sq-item:nth-child(1) {
  margin-bottom: 5px;
}

Css Сlasses

Setup your own css classes for all html elements and customize the markup

Why We Use Cookies