Question Styling: Complex Grid

This article will show you how to format/style items within this specific question type

See the article following article if you have not added JavaScript and/or CSS to a question

• See article: Adding JavaScript and/or CSS to your Question

Even column widths in grids:

When you have headers that vary vastly in the width and the question does not auto-size to correct them you can add in code to ensure each column gets equal weight.

• If you do NOT want to include the header columns in the auto-spacing (as shown in the example above): 
  1. Click 'ADD CSS'
  2. Add the following code:

  td[class*=cm-grid-column]:not(.cm-grid-column-header) { 	
  	width: 40% !IMPORTANT; 
  }
  		

• If you DO want to include the header columns in the auto-spacing (ensure your percent can be spread evenly across all columns):  
  1. Click 'ADD CSS
  2. Add the following code

  td.cm-grid-cell  { 
  	width:33% !IMPORTANT; 
  }
  		

Shading Grid Rows:

If you are using merged cells/rows/columns, see below the javascript for .css to use instead:

1. Click on 'ADD JAVASCRIPT' in the card that contains your grid
2. Paste the code below 
3. You can adjust the rgb code to any color you wish below (235,235,235).
4. Click 'SAVE' when you are done

var $ = cmJq; 
var rowsToShade = $(".cm-grid-response-set  tr:not(.cm-grid-row-header)");

if (rowsToShade.length % 2 == 0) { 
    $(".cm-grid-response-set  tr:not(.cm-grid-row-header):nth-child(odd) td").css("background-color","rgb(235,235,235)");
} else { 
    $(".cm-grid-response-set  tr:not(.cm-grid-row-header):nth-child(even) td").css("background-color","rgb(235,235,235)");
}

You can also accomplish this in .css.  

1. Just click 'ADD CSS' 
2. Paste in the code below. There are 2 portions, one for the odd rows and one for the even rows. You can use just one or both depending on your application
3. Change the  "#DCDCDC" to the hex code of the color you want. 
4. Click on 'SAVE' when you are done

/* ODD ROWS */
.cm-grid-row:not(.cm-grid-row-header):nth-child(odd) {
  background: #DCDCDC;
}


/* EVEN ROWS */
.cm-grid-row:not(.cm-grid-row-header):nth-child(even) {
  background: #DCDCDC;
}

Shading Grid Headers:

You can add the following code to ADD CSS:

This will apply to all rows with an "H".

.cm-grid-row-header {
	background: #eeeeee;
}

This will apply to all columns with an "H".

.cm-grid-column-header {
	background: #eeeeee;
}

Move Other Specify box Underneath choice:

You can add the following code to ADD CSS: 

.cm-grid-response-set INPUT.cm-other-specify {
	  display: block;
	  margin: 5px auto;
	  width: 90%;
	  max-width: 15em;
}

table.cm-grid-response-set {
	width: auto;
}
	

Style a particular column in a grid:

You can add the following code to ADD CSS.  The XX denotes the column you wish to modify.  Here we have specified a width as well as a background color.

.cm-grid-column-XX {
	width:1% !IMPORTANT; /* This is the width */
	BACKGROUND:#EEEEEE; /* This is the background color */
}

• Please Note:
  • V1 Theme:
    • If you are setting a width, you must set a width for ALL columns, otherwise auto-sizing will take precedence.
  • V2 Theme:
    • If you are setting a width, that will take precedence.

Click "SETTINGS" and then "THEME"

Once you are in theme add/update the following code in bold ensure the colors match.

.cm-grid-response-set .cm-grid-cell.warning {
	position: relative;
	background-color: #ffcbcb !important;
}
.cm-cell-response-error.has-error-description span {
	color: #ffcbcb;
	font-weight: bold;
	position: absolute;
	right: -9px;
	top: -2px;
}

Change the Size of a Text Box in a Complex Grid

Add the following code into the 'ADD CSS' field 

/* COMPLEX GRID - Change Text Box Size */ 
input[type='text'] {width: 200px !important;}

Word Wrapping and Width

Add the following code into the 'ADD CSS' field 

/* WORD BREAKS */ 
.cm-grid-response-set .cm-grid-row .cm-grid-cell { 
word-break: keep-all !important;
}

/* TAKE ONLY THE SPACE NEEDED */
table.cm-grid-response-set {
	width: auto;
}

Change the Size of a Text Box in a Complex Grid

Add the following code into the 'ADD CSS' field 

/* COMPLEX GRID - Change Text Box Size */ 
input[type='text'] {width: 200px !important;}

Bottom Row Grid Styling

Add the following code into the 'ADD CSS' field 

/* BOTTOM ROW GRID STYLING ONLY */
.cm-grid-response-set .cm-grid-row:last-child .cm-grid-cell {
    background: #eee;
}

Adjust Spacing Above Dropdowns

Add the following code into the 'ADD CSS' field 

/* Complex Grid - Adjust Spacing Above Dropdowns */ 
div.fieldset {
    margin-top: 0.1em !important;
    padding: 0px 0px 5px;
}