Question T10302
Visible to All Users

Styling text to render like questions when exported

created 2 years ago

Hi,

So, there's a business need to have text(directive, special instructions) which look like the question title when rendered in the pdf. We've tried internally to use the html widget with both inline styles and css class but it doesn't look like the questions title when the pdf is generated. Please see this plunker for examples of the different ways we're using the the html widget, https://plnkr.co/edit/hPm1i4PqGRYTjnez We have also experimented with using the color picker as well, just to achieve this behavior but that produced borders in the pdf.

What is your recommendation to achieve this business need.

Answers approved by surveyjs Support

created 2 years ago

Hello,

You can customize UI elements according your needs using CSS. E.g. for defaultV2 theme you can use the following rule:

CSS
.sd-input--disabled { background-color: white; color: black; border-radius: 0; border: 2px solid black; height: 24px; padding: 6px; }

Here is the working plunker example - https://plnkr.co/edit/9JAHUUsJhFqDxcXL

You can customize any other HTML elements in survey according your needs using custom CSS rules. It's an ordinary work for a web developer.

Thanks, Serge
SurveyJS Team

    created 2 years ago

    Hello,
    You can make "text" questions read-only.

    JavaScript
    surveyPDF.getAllQuestions().forEach(q => {   if(q.getType() === "text") q.readOnly = true; })

    Will it work? Probably I misunderstand the task.

    Thank you,
    Andrew
    SurveyJS Team

      Comments (1)
      LH LH
      Liberty Health 2 years ago

        Thanks for the response, but that will not work since there are other questions of that "text" type in the survey and moreover, the pdf has border around empty space, see attached screen shot in which the A5 text directive has been configured as a "readonly" text. I think if the border can be removed and the resulting whitespace eliminated, this suggestion could work. I think the real solution for this use case is SurveyJS adding title and subtitle elements which would render like the question title and description in the pdf.