Radio buttons are not displaying correctly.

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.

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

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!

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

Please replace it with an apostrophe ' symbol instead.

Thank you.

Thank you.