Question T13552
Visible to All Users

Survey Creator: For Radio group question type more info button is displaying in the new line

created 2 years ago (modified 2 years ago)

Hi Team,
For Radio group question type more info button is displaying in the new line

Modify Designer and Test Surveys | Creator Example for Angular (surveyjs.io)
Clipboard-File-1.png

JSON
{ "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "radiogroup", "name": "question1", "popupDescription": "Test popup description", "choices": [ "Item 1", "Item 2", "Item 3" ] }, { "type": "checkbox", "name": "question2", "popupDescription": "Our tech experts will guide you through all aspects of building your own form management system with SurveyJS.", "choices": [ "Item 1", "Item 2", "Item 3" ] } ] } ] }

For other question is was displaying correctly as below (for checkboxes type)
Clipboard-File-2.png

Could you please assist us to resolve this

Comments (1)

    Hello Santosh,
    Thank you for bringing our attention to this behavior. I'm currently working on this issue. Please give me some additional time.

    Answers approved by surveyjs Support

    created 2 years ago

    Hi Santosh,
    The above solution requires that you handle the survey.onGetQuestionTitleActions event and add a custom action to the options.titleActions array.

    If you wish to apply this solution to a survey creator, you can use a special creator.onSurveyInstanceCreated event.

    This event (by the way, it was mentioned several times in your other tickets) allows you to modify/customize the survey being edited. The options.reason parameter corresponds to the current Survey Creator mode. For instance, if you check the options.reason against designer, you can access a survey using the options.survey and modify the survey on a design surface. If you wish to modify the previewed survey, check if options.reason equals test.

    Consider this example:

    JavaScript
    creator.onSurveyInstanceCreated.add(function(sender, options) { //If we are creating a surface for designer surface if (options.reason == "designer") { options.survey.onGetQuestionTitleActions.add((sender, options) => {...}); } //If we are creating a surface for "Test Survey" tab if(options.reason == "test") { options.survey.onGetQuestionTitleActions.add((sender, options) => {...}); } });

    The above code handles the onGetQuestionTitleActions function for survey on a design surface and in preview. A Code Sandbox demo is available at https://codesandbox.io/s/surveyjs-angular-forked-556nlf.

    I hope this information helps.

    Should you have any questions or require further assistance, we are here to help.

      created 2 years ago

      Hello Santosh,
      The above demo shows how to use the survey.onAfterRenderQuestion function to render custom content in a survey element title. Thus, since this example utilizes custom rendering, it may be necessary to adjust position of rendered items via CSS.

      If you wish to add a custom action to a question's title, please use a special survey.onGetPageTitleActions event and add a custom Action object to the options.titleActions array. This will ensure that a custom action appears correctly in an action bar. For more information on this option, refer to the following demo: Context Actions in Element Titles.

      Let me know if you have any questions or require further assistance.

        Comments (3)

          HI Jane, Thanks for the update . But i believe this should be fixed with respect to question level. even thought if we apply the css to button this will not fix. because for few questions it is appending to the header and for question like radio group it is coming in new line.
          We have to be make sure that for all the questions 'more info' button should append immediately next to it on the same line.
          please check below logic

          Code
          createButtonForPopup(options, showPopup) { let btn = document.createElement("span"); //Show button if popupdescription property is not empty btn.style.visibility = !options.question.popupdescription ? "hidden" : ""; btn.style.position = "relative"; btn.style.padding = "0 3px"; btn.style.border = "none"; btn.innerHTML = 'more infor>'; //Change button visibility on changing the property options.question.registerPropertyChangedHandlers(["popupdescription"], function (newValue) { btn.style.visibility = !newValue ? "hidden" : ""; }); if (showPopup) { let popupdescription = options.question.popupdescription; btn.onclick = () => { alert(popupdescription); } } **    let header = options.htmlElement.querySelector("h5");     let span = document.createElement("span");     span.innerHTML = "  ";     header.appendChild(span);     header.appendChild(btn);** }

            Hi Santosh,
            If you wish to display a More Info button in a question's title area, please handle the survey.onGetPageTitleActions event and add a custom Action object to the options.titleActions array.

            JavaScript
            function showDescription(element) { //... } survey.onGetQuestionTitleActions.add((_, opt) => { opt.titleActions = [ { title: 'More info', innerCss: 'btn-more-info', action: () => { showDescription(opt.question); }, }, ]; });

            View Demo

            With this option, a custom action always appears correctly in an action bar.

            Please let me know if this option works for you.

              Can you share the same example for survey creator?