Question T13614
Visible to All Users

Overwritten `model.css` Properties Only Effective when Running `model.onUpdate*CssClasses` Callback

created 2 years ago

Hello,

I'm trying to set the title and description sizes of questions and panels equal to the one of pages. I wasn't successful using model.css. I then tested the model.onUpdateQuestionCssClasses callback for another issue and noticed that suddenly the changes were applied.

I know the following isn't reproducible for you but since I technically solved the issue at the moment I can't invest the time to create an MWE in codesandbox. Still, I wanted to bring this to your attention, maybe you can figure out something from the attached screenshots.

A bit of context: The customizers are an array of customizer functions applied to the model after its' creation. The "Mehrfachauswahl" on the right side is a description of a checkbox question. The nested loops include an iteration where model.css["question"]["description"] = model.css["page"]["description"] is executed. The line 136 is the only thing that I am changing in between screenshots. I can also register the callbacks in lines 137 or 138 instead to achieve the same effect.

I'd appreciate your thoughts on this beahvior.

Thanks

Lucas

withoutCallback.png

withCallback.png

Answers approved by surveyjs Support

created 2 years ago

Hello Lucas,
You can simply override our CSS rules. Here is the simple example.
If your CSS rules will be running after our default CSS then your rules will override default rules.

Thank you,
Andrew
SurveyJS Team

    Show previous comments (1)

      Hello Lucas,
      I do not see any issue with overriding our CSS rules. Anyway, you can use another approach and modify css we are rendering.
      Here is the example:

      JavaScript
      const rootCSS = Survey.surveyCss["defaultV2"]; rootCSS.question.title += " your-question-title-css";

      You can find defaultV2 css object here.

      Thank you,
      Andrew
      SurveyJS Team

        Hi Andrew,

        I applied my overwrites to the global object as you suggested and it seems to work reliably:

        TypeScript
        import { surveyCss, defaultV2ThemeName } from "survey-core"; ["question", "panel", "paneldynamic"].forEach((element) => { ["title", "description"].forEach((key) => { surveyCss[defaultV2ThemeName][element][key] = surveyCss[defaultV2ThemeName]["page"][key]; }); });

        Thanks,

        Lucas

          Hello Lucas,
          Thank you for sharing your code!

          Andrew
          SurveyJS Team