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

Css Сlasses

Open in new window

Export Pdf

Result
JavaScript
HTML
CSS
QR Code


                        
        
            Survey.StylesManager.applyTheme("modern");
        


            
                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(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.onUpdateQuestionCssClasses.add(function(survey, options) {
    var classes = options.cssClasses

        classes.mainRoot += " sv_qstn";
    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";
    }
});
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });

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

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="/DevBuilds/survey-vue/survey.vue.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

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

<script type="text/javascript" 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