MDL-47494 ddwtos: Align drag boxes containing sup and sub better. #2094

question/type/ddwtos/README.txt

@@ -21,3 +21,24 @@ Alternatively, download the zip from
     https://github.com/timhunt/moodle-qtype_ddwtos/zipball/master
 unzip it into the question/type folder, and then rename the new folder to
 ddwtos.
+
+
+Note that, if you put superscripts and subscripts in your drag boxes, then there
+is a weird layout bug with web browsers that means the boxes will not line up.
+You can solve this by putting something like this in your theme CSS:
+/*
+ * Superscript and subscript: don't use default styling, it does weird things to
+ * line height. This fix comes from https://github.com/necolas/normalize.css
+ */
+sub,
+sup {
+    font-size: 80%;
+    position: relative;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.4em;
+}
+sub {
+    bottom: -0.2em;
+}

question/type/ddwtos/yui/dd/dd.js

@@ -109,8 +109,8 @@ YUI.add('moodle-qtype_ddwtos-dd', function(Y) {
                 var ie7fix = false;
                 //find max height and width
                 groupitems.each(function(item){
-                    maxwidth = Math.max(maxwidth, item.get('offsetWidth'));
-                    maxheight = Math.max(maxheight, item.get('offsetHeight'));
+                    maxwidth = Math.max(maxwidth, Math.ceil(item.get('offsetWidth')));
+                    maxheight = Math.max(maxheight, Math.ceil(item.get('offsetHeight')));
                     if (item.one('sup') && item.one('sub') && Y.UA.ie == 7){
                         ie7fix = true;
                     }
@@ -126,17 +126,8 @@ YUI.add('moodle-qtype_ddwtos-dd', function(Y) {
             }
         },
         pad_to_width_height : function (node, width, height, extrabottompadding) {
-            var totalypadding = height - node.get('offsetHeight');
-            var totalxpadding = width - node.get('offsetWidth');
-            var margintop = Math.round(totalypadding/2);
-            var marginleft = Math.round(totalxpadding/2);
-            var marginbottom = totalypadding - margintop;
-            if (extrabottompadding) {
-                marginbottom += 8;
-            }
-            var marginright = totalxpadding - marginleft;
-            node.setStyle('padding', margintop+'px '+marginleft+'px '
-                                    +marginbottom+'px '+marginright+'px');
+            node.setStyle('width', width+'px').setStyle('height', height+'px')
+                    .setStyle('lineHeight', height+'px');
         },
 
         /**