Modifying template for formulaequationinput and fixing CSS

common/lib/capa/capa/templates/formulaequationinput.html

@@ -16,11 +16,12 @@
         </span>
       </span>
 
+      <p id="answer_${id}" class="answer"></p>
+
       <div id="input_${id}_preview" class="equation">
         \[\]
         <img src="${STATIC_URL}images/spinner.gif" class="loading" alt="Loading"/>
       </div>
-    <p id="answer_${id}" class="answer"></p>
   </div>
 
   <div class="script_placeholder" data-src="${previewer}"/>

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -406,7 +406,6 @@ div.problem {
       margin-top: 3px;
 
       .MathJax_Display {
-        display: inline-block;
         width: auto;
       }
 
@@ -429,6 +428,11 @@ div.problem {
       }
     }
 
+    // Fix for formulaequationinput, overriding MathJax_Display default style to allow "loading" image to sit next to it
+    section.formulaequationinput div.equation .MathJax_Display {
+      display: inline-block !important;
+    }
+
     // Hides equation previews in symbolic response problems when printing
     [id^='display'].equation {
       @media print {
@@ -713,13 +717,10 @@ div.problem {
       height: 46px;
     }
 
-    > .incorrect, .correct, .unanswered {
-
-      .status {
-        display: inline-block;
-        margin-top: ($baseline/2);
-        background: none;
-      }
+    .status {
+      display: inline-block;
+      margin-top: ($baseline/2);
+      background: none;
     }
 
     // CASE: incorrect answer
@@ -746,8 +747,8 @@ div.problem {
       }
     }
 
-    // CASE: unanswered
-    > .unanswered {
+    // CASE: unanswered and unsubmitted
+    > .unanswered, > .unsubmitted {
 
       input {
         border: 2px solid $gray-l4;