⚖️Reformat Likert (Rating Scale) Labels

When using Slate’s Rating Scale (Likert scale) element on a form, you may wish to hide the label (reference Hide Rating Scale Label). But, with a rating scale, that’s not often ideal. You want your rating scale to have its question label attached.

But you do not want the question squished to the right of your scale, because your question label is not so brief, as is so often the case with rating scales. Or, in the case of a Reader form, it’s downright unusable – especially if you put label descriptions, not numbers...

One option is to employ a Slate hack, where you hide the label, move the Rating Scale elements over, and insert an Instruction Block element for each Rating Scale to insert your question. But that’s a lot of extra work, and probably not helpful for screen readers.

Solution – some jQuery and CSS to move things around.

First, the jQuery. You need to put the jQuery in the source code of an instruction block, to run the script without causing the labels to flash from their original position to the new position:

<script>  // Move Likert labels before the responses
  $('.form_likert .form_responses_labels').each(function () {
    var formLabel = $(this).siblings('.form_label');
    if (formLabel.length) {
      formLabel.insertBefore($(this));
    }
  });
  </script>

This little script will move all Rating Scale question labels from their default HTML design inside of the <fieldset>:

<div>Response Labels</div>
<div>Question Labels</div>
<input>Radio Elements</input>

To a more proper order of things (note - not actual HTML output, just a design model):

<div>Question Labels</div>
<div>Response Labels</div>
<input>Radio Elements</input>

But this new configuration retains Slate’s CSS configuration for rating scales, squished and to the side:

Second, you need to update the CSS. The goal:

• Widening and centering the Rating Scale question label element
• Re-aligning the Rating Scale response labels and radio elements (reference Hide Rating Scale Label

The CSS can live in the “Edit Scripts/Styles” popup property on a standard form. But it needs to live inside of an "HTML Instruction block" source code, if it’s a Reader form.

Accessing the Custom Styles Tab:

On to the CSS code! First, to fix the squished box:

 

/*/ Reformat Form Label to not be a narrow box */
div.form_container div.form_question.form_layout_table[data-type="likert"] .form_label {
  margin:0 auto;
  width:100%;
  text-align:center;
}

And then, to fix the alignment of the labels and radio buttons:

 

/*/ Reformat Form Response Label and Responses to be Full Width */
div.form_container div.form_question[data-type="likert"]>fieldset>.form_responses_labels {
    margin-left: unset !important;
}
div.form_container div.form_question.form_layout_table[data-type="likert"] .form_responses, div.form_container div.form_question.form_layout_table[data-type="likert"] .form_responses_labels {
    width: 100%;
    padding-left: 0px !important;
}

Which then gives us this improved layout:

And in Reader:

The Reader Instruction block element will house both the CSS and jQuery Script. Here's a screenshot of the entire source code, in all of its glory:

You could try and toy around with this further - maybe you have a goal to center the form_responses and the form_response_labels together – but that’s getting in too deep for this article!