Custom QuestionWrapperComponent

[momaekwudi]

A question, Currently, I have achieved the effect of Figure 2 using the method shown in Figure 1. However, my expectation is that 123 will be displayed below the title. What should I do? Thank you

[JaneSjs]

Hello @momaekwudi, Would you please elaborate on your main goal?

Thank you

[momaekwudi]

Hello @momaekwudi, Would you please elaborate on your main goal?

Thank you

Hi, @JaneSjs Okay, I expect to display custom components under each question, such as some images. that come from some of my custom attributes

[JaneSjs]

Hello @momaekwudi, Thank you for the update. The question React component defines the rendering for the entire question element. Therefore, your custom content appears above the question element. You can refer to our source code for more information on how survey questions are rendered: reactquestion.tsx.

If you wish to render a custom content under a question's title and description, override the renderQuestionContent function.

Consider the following code:

import { SurveyQuestion, ReactElementFactory } from "survey-react-ui";

class QuestionWrapperComponent extends SurveyQuestion {
  renderQuestionContent() {
    return (
      <div style={{ width: "100%" }}>
        <div className="fillDescription-with-question">
          <div>123</div>
        </div>
        <div>{super.renderQuestionContent()}</div>
      </div>
    );
  }
}
ReactElementFactory.Instance.registerElement("question", (props) => {
  return React.createElement(QuestionWrapperComponent, props);
});

Please feel free to reactivate this thread if you require further assistance.