How can I add numbering to the row headers?

0

Hi,

To create my questionnaire, I’m using Radio Button Grid and I’m wondering if I can add numbering to the row headers?

For example:

———————————————————————————————————

How often you use social media?            Never     Rarely     Sometimes     Often     Always

  1. Facebook
  2. Twitter
  3. LinkedIn
  4. Google+

———————————————————————————————————

Please note, because I’m randomizing the rows’ order, I cannot simply put a number next to each row header, doing that may result in an odd looking grid (for example after randomization):

———————————————————————————————————

How often you use social media?            Never     Rarely     Sometimes     Often     Always

     2.Twitter

     4.Google+

     1.Facebook

     3.LinkedIn

———————————————————————————————————

Thanks for your help!

 

 

leilarezai380621 asked
    0

    Seanalee, thanks a lot for your help! I tried the code you provided, but couldn’t see any changes. Probably I’m doing something wrong… Here are the steps I took:

    1. I opened the Style tab (the one next to the Build tab)
    2. In the Theme Builder I chose the custom tab and pasted the CSS code above
    3. In the Edit section of my question, I chose Layout. In the Layout tab, I entered “numbered-grid-rows” into the CSS Class Name edit box

    No numbering appeared next to my row headers, though. Please let me know if I should have done something different.

    Again, thanks a lot for your help!

    leilarezai380621 answered
      0

      Hello!
      Thank you for your post!

      We don’t have this built into our software, but we did find a CSS work around:)

      Here is CSS that you can paste into your style:

      .numbered-grid-rows tbody tr th::before {
      padding-right: .5em;
      }
      .numbered-grid-rows tbody tr:nth-child(1) th::before {
      content: ‘1.’;
      }
      .numbered-grid-rows tbody tr:nth-child(2) th::before {
      content: ‘2.’;
      }
      .numbered-grid-rows tbody tr:nth-child(3) th::before {
      content: ‘3.’;
      }
      .numbered-grid-rows tbody tr:nth-child(4) th::before {
      content: ‘4.’;
      }

      All you need to do is apply the CSS class name:

      numbered-grid-row to the question

      This will make it so your row headers are numbered:)

      Let us know if we can help in any other way:)

      Seanalee

      Survey Princess

      seanalee flaherty answered
        ×

        Login

        Question stats

        • Active
        • Views2194 times
        • Answers2 answers
        • Followers0 followers