# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1455267761 0
# Node ID d7b1b270c13abff23c8af44dc9f95175db44d43e
# Parent  f4800ccc4d54d568b744947e1461976b092be5b4
Bug #1562: Checkbox and radios will be center aligned, left justified. Also solves issue #1571. Only tested in OSX Chrome!

diff -r f4800ccc4d54 -r d7b1b270c13a core.css
--- a/core.css	Fri Feb 12 08:42:15 2016 +0000
+++ b/core.css	Fri Feb 12 09:02:41 2016 +0000
@@ -63,6 +63,7 @@
     min-height: 50px;
     max-height: 320px;
     overflow: auto;
+    position: relative;
 }
 
 button.popupButton {
diff -r f4800ccc4d54 -r d7b1b270c13a core.js
--- a/core.js	Fri Feb 12 08:42:15 2016 +0000
+++ b/core.js	Fri Feb 12 09:02:41 2016 +0000
@@ -515,11 +515,14 @@
             }
 			this.popupResponse.appendChild(textArea);
 			textArea.focus();
+            this.popupResponse.style.textAlign="center";
+            this.popupResponse.style.left="0%";
 		} else if (node.specification.type == 'checkbox') {
             if (node.response == undefined) {
                 node.response = Array(node.specification.options.length);
             }
             var index = 0;
+            var max_w = 0;
 			for (var option of node.specification.options) {
 				var input = document.createElement('input');
 				input.id = option.name;
@@ -537,13 +540,21 @@
                         input.checked = "true";
                     }
                 }
+                var w = $(span).width();
+                if (w > max_w)
+                    max_w = w;
                 index++;
 			}
+            max_w += 12;
+            this.popupResponse.style.textAlign="";
+            var leftP = ((max_w/500)/2)*100;
+            this.popupResponse.style.left=leftP+"%";
 		} else if (node.specification.type == 'radio') {
             if (node.response == undefined) {
                 node.response = {name: "", text: ""};
             }
             var index = 0;
+            var max_w = 0;
 			for (var option of node.specification.options) {
 				var input = document.createElement('input');
 				input.id = option.name;
@@ -560,7 +571,14 @@
                 if (input.id == node.response.name) {
                     input.checked = "true";
                 }
+                var w = $(span).width();
+                if (w > max_w)
+                    max_w = w;
 			}
+            max_w += 12;
+            this.popupResponse.style.textAlign="";
+            var leftP = ((max_w/500)/2)*100;
+            this.popupResponse.style.left=leftP+"%";
 		} else if (node.specification.type == 'number') {
 			var input = document.createElement('input');
 			input.type = 'textarea';
@@ -571,6 +589,8 @@
                 input.value = node.response;
             }
 			this.popupResponse.appendChild(input);
+            this.popupResponse.style.textAlign="center";
+            this.popupResponse.style.left="0%";
 		}
 		if(this.currentIndex+1 == this.popupOptions.length) {
 			if (this.node.location == "pre") {
diff -r f4800ccc4d54 -r d7b1b270c13a index.html
--- a/index.html	Fri Feb 12 08:42:15 2016 +0000
+++ b/index.html	Fri Feb 12 09:02:41 2016 +0000
@@ -53,10 +53,10 @@
 		</div>
         <div id="popupHolder" class="popupHolder" style="visibility: hidden; z-index: -1">
             <div id="popupContent">
-                <div id="popupTitleHolder" align="center">
+                <div id="popupTitleHolder" style="text-align: center">
                     <span id="popupTitle"></span>
                 </div>
-                <div id="popupResponse" align="center"></div>
+                <div id="popupResponse"></div>
             </div>
             <button id="popup-proceed" class="popupButton">Next</button>
             <button id="popup-previous" class="popupButton">Back</button>