[Solved] [Known Issue] NPS left and right labels are not looking good in mobile interactions

0

If you’re using an NPS question that has left and right labels in your survey along with mobile interactions (Standard or One at a Time), you’ll probably notice that the labels don’t look great.

We do have a workaround though:

Add a custom class name to your NPS questions. “fix-label”

Now add this CSS to Style => Customize Theme => Custom => CSS

.sg-survey .sg-mobile-optimized td.sg-cell.sg-cell-1.sg-first-cell.sg-cell-label.sg-cell-left-label,
.sg-survey .sg-mobile-optimized td.sg-cell.sg-cell-13.sg-last-cell.sg-cell-label.sg-cell-right-label {
  width: 48% !important;
}

Lastly, dd the following Javascript to the page or to Style => Customize Theme => Custom => HTML in <script> tags

$(document).ready(function () {
  var columnPos = 13; //Where the column currently is
  var insertPos = 1; //Where we are going to move it to. Use 'last' if moving column to end of table
  var moveColumns = function (className) {
      var columnEls = $('.' + className + ' tr').children(':nth-child(' + columnPos + ')');
      columnEls.each(function () {
          //Use this line if moving the column anywhere but the end of the table
          var insertSibling = $(this).siblings(':nth-child(' + insertPos + ')'); 
          //Use this line if moving the column to end of table
          //var insertSibling = $(this).siblings(':' + insertPos + '-child');
          insertSibling.after($(this));
      })
  }
  if ($('body').hasClass('sg-mobile-optimized')) {
    moveColumns('fix-label'); //Class name goes here
  }
});

Please let us know if you have any trouble with the workaround.
Patrick - Survey McDuck asked

    Best answer

    0

    Hey Everybody,

    Our Engineers have patched up this issue with Mobile and NPS questions and their labels!

    Please let us know if you are still seeing display issues here.  :)

    Jon - The Survey Dude answered
      ×

      Login

      Question stats

      • Active
      • Views556 times
      • Answers1 answer
      • Followers0 followers