Radio Checklist Header Problem

0

 Hi! I have problems inserting a description/header for the column header while using radio checklist. I know this sounds complicated and ridiculous, therefore I have attached a picture of it.

 

How can I insert the words in Red on top of the column headers?

Jim W (Moderator) answered
    2

    We format the column headers (words in red) with HTML line breaks (<br/>).  In the example above the first column header would look like this:

    Very Unsatisfactory<br/>1

    The results look like this:

    However, we use 5 point scales.  This method may not work as well with the 10 point scale you are using.

    Jim W (Moderator) edited answer
      2
      IS 1.87K Rep.

      I don’t think there is an elegant way to do this, but I came up with a couple methods to do something similar. Whatever you do, the layout you want does not translate to mobile very well, so it might just be better to add Additional Instructional Text instead of having the top headers.

      That said, one way I found to do this is to use a Custom Table question type and then change up the display with some CSS. In my example, the first column header is Very Unsatisfactory and includes all of the answers in that column. The second column only has the column header Very Unsatisfactory. This leaves the 2nd column header floating off the end of the table, but with some CSS, you can shift it over.

      The question setup looks like this:


      Clicking on the edit icon that I circled in red leads to the radio question options:

      Note that the N/A answer is there as well, it just is off the bottom of my screen clip.

      I then Added the following CSS:

      .sg-type-table-matrix thead tr:nth-of-type(1) th:nth-of-type(2) {
      text-align: left;
      vertical-align: top;
      }
      .sg-type-table-matrix thead tr:nth-of-type(1) th:nth-of-type(3) {
      text-align: right;
      vertical-align: top;
      white-space: nowrap;
      float: right;
      position: relative;
      left: -140px;
      }

      Note that it would probably be much better to assign a class to these types of questions on the Layout tab and then refer to this custom class instead of .sg-type-table-matrix

      Below is what the result looks like. I included what the question looks like as a standard Radio Button Grid with a little extra explanation for reference.

      IS answered
        ×

        Login

        Question stats

        • Active
        • Views1253 times
        • Answers2 answers
        • Followers2 followers