Question T8706
Visible to All Users

Classes disappear after panel being re-enabled

created 3 years ago

Hello,
I am using SurveyJS in a vue application. I am trying to apply my own CSS style on some elements. I am using a method to select those elements and change the CSS classes :

JavaScript
methods: { updateClasses() { const elements = Array.from(document.getElementsByClassName('sv-text')) elements.forEach(element =>{ element.classList.remove('sv-text') element.classList.add('login-form__input', 'input-width') }) } }

This works well but in my survey I have a panel which disappear if one question has a false answer.

JavaScript
type: 'panel', name: 'panel1', enableIf: '{authority}=true',

If the user chooses No but changes his mind and click yes, the panel comes back but my classes (login-form__input and input-width) are gone and are replaced by the original SurveyJS classes (sv-text). How can I keep my own classes in this case ??

Comments (2)

    Hello,

    Can you share a minimal working example (in plunker or other sandbox) illustrating the issue?

    Thanks, Serge
    SurveyJS Team

      Answers approved by surveyjs Support

      created 3 years ago

      Hello,

      You need to use the https://surveyjs.io/Documentation/Library?id=surveymodel#onUpdateQuestionCssClasses event to patch CSS classes.
      Here is the updated example - https://codesandbox.io/s/admiring-cherry-xml7h?file=/src/App.vue

      Thanks, Serge
      SurveyJS Team

        Comments (2)

          Also, is there a way to remove the little star sign (*) that comes next to the title when a question has the property isRequired: true ?
          After reading the documentation I realized that I can't apply my own CSS to this element.
          I was doing this way

          JavaScript
          const stars = Array.from(document.getElementsByClassName('sv-question__required-text')) stars.forEach(star => star.style.display = 'none')

          but the stars come back when I toggle the panel off and on.
          Here is the updated example - https://codesandbox.io/s/smoosh-microservice-ccwhh?file=/src/App.vue

            I have found the element to target => .requiredText