Question T14352
Visible to All Users

Alignment of Radiogroup Choices when Adding Questions to the Same Row

created a year ago

Hello,

When placing additional elements on the same row as a radiogroup, it changes the position of the elements.

Consider the following example, where questions 1 and 3 are defined identically, but the alignment is completely off.

I'd be happy for any suggestions on how to fix this.

Thanks,

Lucas

Clipboard-File-1.png

JSON
{ "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "radiogroup", "name": "question1", "maxWidth": "600px", "choices": [ "Item 1", "Item 2", "Item 3" ], "colCount": 3 }, { "type": "text", "name": "question2", "startWithNewLine": false }, { "type": "radiogroup", "name": "question3", "maxWidth": "600px", "choices": [ "Item 1", "Item 2", "Item 3" ], "colCount": 3 } ] } ] }
Comments (1)

    Hello Lucas,
    Thank you for sharing a demo. I'll discuss this issue with the development team and update you shortly.

    Answers approved by surveyjs Support

    created a year ago

    Hello Lucas,
    Thank you for reaching out to us and sharing your survey layout.

    We are aware of some layout issues in our Form Library, and your example is one of them. Unfortunately, we haven't yet consider the most straightforward option to handle this. Nevertheless, I noted down your inquiry and forwarded it to the development team for further research: https://github.com/surveyjs/survey-library/issues/6781.

    In the meantime, I would recommend that you put an empty HTML question to the right side of a Radiogroup question within the second row.

    JSON
    { "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "radiogroup", "name": "question1", "maxWidth": "600px", "choices": [ "Item 1", "Item 2", "Item 3" ], "colCount": 3 }, { "type": "text", "name": "question2", "startWithNewLine": false }, { "type": "radiogroup", "name": "question3", "maxWidth": "600px", "choices": [ "Item 1", "Item 2", "Item 3" ], "colCount": 3 }, { "type": "html", "name": "question4", "startWithNewLine": false } ] } ] }

    This trick would allow questions to line up:
    Clipboard-File-1.png

    HTML questions do not appear in survey results; so I hope this simple yet effective solution may help you in the meantime.

    Please drop me a line if you have any further questions.

    Thanks

      Comments (3)

        Update: it appears to be a more straightforward option to align Radiogroup questions. If you wish to display all radiogroup buttons in a row, just set the colCount to 0.

        JSON
        { "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "radiogroup", "name": "question1", "maxWidth": "600px", "choices": [ "Item 1", "Item 2", "Item 3" ], "colCount": 0 }, { "type": "text", "name": "question2", "startWithNewLine": false }, { "type": "radiogroup", "name": "question3", "maxWidth": "600px", "choices": [ "Item 1", "Item 2", "Item 3" ], "colCount": 0 } ] } ] }

        A survey appears as follows:
        Clipboard-File-1.png

        Please let me know if this option works for you.

        LF LF
        Lucas Forster a year ago

          Hello Jane,

          unfortunately "colCount": 0 simply disables columns for me, leading to no alignment at all:

          Clipboard-File-1.png

          The workaround with the empty html-question is hard to explain to non-technical users of the creator.
          If it's the only way I'll have a look whether I can automate the creation of these empty questions.

          Thanks,

          Lucas

          JSON
          { "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "radiogroup", "name": "question1", "choices": [ "a", "ab", "abc", "abcd", "abcde", "abcdef" ], "colCount": 0 }, { "type": "radiogroup", "name": "question2", "choices": [ "abcdef", "abcde", "abcd", "abc", "ab", "a" ], "colCount": 0 } ] } ] }

            Hello Lucas,
            Thank you for the update. Unfortunately, we are unable to suggest any pixel-perfect option which would allow to align radogroup options in different rows. As an option, please consider using a matrix question.

            Just for the record: I've taken note of your inquiries. We'll keep them on our radar for future development.

            I appreciate your understanding. Please feel free to reach out if you have any more questions.