Question T5629
Visible to All Users

Creator | Angular | Survey creation title, logo, add editor

created 4 years ago

Hi Team,

Here are my couple of requirement need to be fix, following are:

  1. When editing anything longer than one line (survey title or a question), you can’t see more than the first line. You can’t edit while viewing the whole paragraph or question. (need like: textarea)

  2. The options for placing a logo at the top are limited.  They enable, left, right, on top or on bottom.
    I should have left on top, right on top or center on top or bottom (I believe the last one is what happens when you select top or bottom.

  3. Is there any way to set WISYWYG editor for survey title, so I can have control over title sizing, fonts, bold, etc.?

  4. Is there any control over spacing between the intro(title) and first question or between questions?

How can I achieve these?

Thanks!

Answers approved by surveyjs Support

created 4 years ago

Hello,

This is the working CodeSandbox sample of how to use CKEDITOR in SurveyJS Creator - https://codesandbox.io/s/surveyjs-angular-forked-shz1x

You were need to add the CKEDITOR on your page in order to make it work:

HTML
<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

As for the second issue - unfortunately I haven't managed to reproduce the issue. Could you share the exact steps or modify the CodeSandbox above to reproduce the issue with title adorner overflow?

Thanks, Serge
SurveyJS Team

    Comments (1)
    DK DK
    Dmitry Kurmanov 4 years ago

      Also we've updated the example on our site to make it work with angular. It will be available after the site update.

      created 4 years ago

      Hello,

      Thank you for the valuable feedback.

      The inplace editors (internally called adorners) were designer to quickly edit title and that's why they were designed this way. The reach text also is supported if you attach e.g. markdown text processor to survey library. Opening heavy large popup of a complex text editor looks ugly and hit the performance. This is the current state of things. And some of them can be changed right now via custom coding.

      1. Is there any way to set WISYWYG editor for survey title, so I can have control over title sizing, fonts, bold, etc.?

      You can integrate a 3rd party rich text editor and use it for title editing. Here is the live sample on our site - https://surveyjs.io/Examples/Survey-Creator?id=ckeditorpropertyeditor
      You can add a question, open "Title" section in the property panel on the right side and you will see integrated editor.

      1. Is there any control over spacing between the intro(title) and first question or between questions?

      Yes, you can override default CSS rules for any theme. One of the samples from the 'Appearance customization' section - https://surveyjs.io/Examples/Library?id=survey-cssclasses&platform=jQuery&theme=bootstrap#content-result shows how to add custom styles and add custom CSS rules. This question is related to SurveyJS Library.

      1. The options for placing a logo at the top are limited.  They enable, left, right, on top or on bottom.
        I should have left on top, right on top or center on top or bottom (I believe the last one is what happens when you select top or bottom.

      We do understand existing limitations of title layout options. But layouts can be rather complex and we probably willn't cover all possible scenarios. In this case we recommend our customers to hide survey built-in title and show your own header above rendered survey. In this case you can implement any custom title layout.

      1.When editing anything longer than one line (survey title or a question), you can’t see more than the first line. You can’t edit while viewing the whole paragraph or question. (need like: textarea)

      As I said earlier we supposed long titles to be entered in one line and then auto layouted with or without a title image. Also textarea HTML element as inplace editor looks ugly and makes question height jump on start editing.
      We'll discuss this option with the team. You can help us if share a picture of the desired design for inplace editor.

      Thanks, Serge
      SurveyJS Team

        Show previous comments (5)

          Hello,

          You can set the type of the "title" property of the "survey" object to "text":

          JavaScript
          Survey.Serializer.findProperty("survey", "title").type = "text";

          Thanks, Serge
          SurveyJS Team

            In regards to item #2. With this change, the Logo position (when selecting Left/Right) is on top, since a "width: 100%" is now being applied to class property.

            Is this the intended behavior?

              Hello,

              I've created a separate ticket on your behalf (T5726: Survey logo/title position). It has been placed in our processing queue and will be answered shortly.

              Thanks, Serge
              SurveyJS Team