Script: Simple Grid - Horizontal Radio - Freeze Attribute Column Pane

This article will show you how to freeze the attribute column pane in a Horizontal Radio Simple Grid


Background

You have have a very large grid width a number of columns which will force a respondent to scroll horizontally. This lends itself to losing the row attribute text. This code will help you freeze the attribute column pane so you can scroll as needed while seeing the attribute text. 


Instructions

  1. Program your 'Simple Grid - Horizontal Radio' question
    1. See article: Standard Question: Grid
  2. Add the following to the '+ Javascript' field
    1. See article: Adding JavaScript and/or CSS to a Question
    2. No need to update anything. Just copy and paste this in.
      var $ = jQuery;
      
      $(".cm-simple-grid").wrap("<div class='grid-wrapper'></div>");
      $originalGrid = $(".cm-simple-grid");
      $paneGrid = $originalGrid.clone();
      $paneGrid.addClass("pane-grid");
      $paneGrid.insertAfter($originalGrid);
      $paneGrid.find("input").remove();
      $paneGrid.find(".cm-grid-cell").append("<div class='pane-placeholder'></div>");
      		
  3. Add the following to the '+ CSS' field
    1. See article: Adding JavaScript and/or CSS to a Question
    2. Update the 'Pane Width' below as needed
      .grid-wrapper {
        position: relative;
      }
      
      .cm-simple-grid__row-header {
        background-color: white;
        border-right: 1px solid #ddd;
      }
      
      .pane-grid {s
        overflow: hidden;
        position: absolute;
        width: 300px;
        z-index: 99;
        top: 0;
        left: 0;
      }
      
      .pane-grid thead tr:nth-child(1) {
        background-color: white;
      }
      
      .pane-grid thead.cm-simple-grid__column-header {
        visibility: hidden;
      }
      
      .cm-simple-grid {
        margin: 0;
      }
      
      .pane-placeholder {
      	line-height: 24px;
      	padding-left: 32px;
      	height: 24px;
      }
      		
  4. Make sure to test

Notes:

  • This code will work for a Horizontal Radio - Simple Grid ONLY
  • This will NOT work if you also turn on the 'Mobile Smart' feature. Desktop will look fine but mobile devices will not. 
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us