Question Styling: Numeric

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

Adjust the size of the input box

 Add the following to ADD CSS adjusting the 10em to the size you want it to be.

.cm-numeric-input {width: 10em !important;}

Adjust the Size and Location of the Running Total Box:

Add the following to ADD CSS making sure the size in both places (10em) is the same.

/* INPUT BOX WIDTH */
.cm-numeric-input {
	width: 10em !important;
}
/* RUNNING TOTAL TEXT AND WIDTH */
.cm-running-total-container .cm-numeric-input-container {
	width: 10em !important;  
	text-align: right;
}

Add a Horizontal Line Above the Running Total

Add the following code to the css for your question and adjust as needed: 

.cm-running-total-container {  
	border-top: 5px double #ccc !important; 
	border-bottom: 0 !important;
}

Adjust the Width of the Labels:

Add the following to ADD CSS adjusting the 10em to the size you want

.cm-numeric-label-container {width: 10em !important;}

Vertically Align the Input Box For Each Response

Add the following code to the css for your question:

/* VERTICALLY ALIGN THE INPUT BOXES THEMSELVES */
.cm-response-direction-left .cm-numeric-input-container, .cm-response-direction-left .cm-numeric-label-container, .cm-response-direction-left .cm-numeric-test-label-container, .cm-response-direction-right .cm-numeric-input-container, .cm-response-direction-right .cm-numeric-label-container, .cm-response-direction-right .cm-numeric-test-label-container {
    display: inline-block;
    vertical-align: middle;
}
.cm-response-container.cm-response-direction-left, .cm-response-container.cm-response-direction-right {
    display: -webkit-box;
    display: inherit;
}

Add a Horizontal Line Between Each Row

Add the following code to the css for your question:

/* ADD PADDING AND A HORIZONTAL LINE BETWEEN EACH ROW */
.cm-response-container {
    padding-bottom: .1em;
    padding-top: .6em;
    margin-bottom: .1em;
    margin-top: .6em;
    border-radius: 0em;
    border-top: 1px solid #ccc;
}

Move Input Box After Each Label

Add the following code to the CSS for your question: 

/* Move input box next to label */
.cm-response-direction-left .cm-numeric-label-container { 
  width: auto; 
}