AC-1294 reworked standard out page to support custom scroll bar. Removed use of <pre> elment by parsing the inbound HTML and isolating the style sheet and the job output. Those are now inserted into styled <div> elements, giving the UI better control. The page now listens to the web socket server and refreshes whenver an event happens for the job. On an event the <div> element refreshes and automatically scrolls to the bottom.

awx/ui/static/less/ansible-ui.less

@@ -348,6 +348,12 @@ td.actions {
   font-family: Fixed, monospace;
 }
 
+/* Make a div or any element behave like pre. Use in conjunction with .mono-space */
+.pre {
+  white-space: pre;
+}
+
+
 dd {
   margin-left: 15px;
 }
@@ -1658,7 +1664,8 @@ tr td button i {
 
 /* job stdout */
 
-  #stdout-iframe {
+  #pre-container {
+      overflow: auto;
       width: 100%;
       border-radius: 4px;
       margin: 0;