Radio buttons are not displaying correctly.

  • Profile Image
    RawsonSaunders
    Asked on June 02, 2015 at 01:50 PM

    Hello.  I am using a matrix to create a question with radio button inputs.  It is displaying properly when I'm creating the form (see below)...

    ... but when I open a preview of the form, it is not displaying correctly (see picture below).  Please let me know how to fix this.  Thank you.

  • Profile Image
    Sammy
    Answered on June 02, 2015 at 03:21 PM

    Normally the width of the cells adapt to the width of the input field, the text-fields are wider and this causes the headers for the radio-buttons to be narrowed.

    You can rectify this by applying the following CSS styling.

    #id_32 th.form-matrix-column-headers {
        width : 91px;
        min-width:60px;
    }

    The new value is the min width, which specifies the minimum with of the header thus preventing the text from being wrapped to much.

    Inject it to your form using the designer mode then select the CSS tab

     

     

  • Profile Image
    RawsonSaunders
    Answered on June 02, 2015 at 03:27 PM

    That is not the issue.  Look at the answer options.  They are all supposed to be radio buttons: you're supposed to click one one of the radio buttons in one of the columns.  It appears correctly when I'm editing, but when I preview, the radio buttons in the second two columns are gone and are replaced with text instead.  There should be no text, only radio buttons!

  • Profile Image
    Mike
    Answered on June 02, 2015 at 05:04 PM

    The issue is related to quotation mark symbol " which breaks the form HTML layout.

    Please replace it with an apostrophe ' symbol instead.

    Thank you.

  • Profile Image
    RawsonSaunders
    Answered on June 02, 2015 at 05:34 PM

    Thank you.