Gradebook scrolling, Editing on, in Internet Explorer 11

Gradebook scrolling, Editing on, in Internet Explorer 11

by Thomas College -
Number of replies: 16

Internet Explorer 11 doesn't seem to display the gradebook properly when editing is on in Moodle 2.8.  This is most notable in courses with large numbers of students and a large number of assignments.  When one scrolls to the right, students no longer line up properly with their grade row.  When editing is off, and one scrolls to the right, students line up properly with their grade row.  The gradebook displays properly (both with editing on and off) in Chrome. 

Has anyone else experienced this?  Could anyone suggest a work around or a fix for IE users?

Our current environment is:

Moodle 2.8.3, Windows Server 2012R2, MS SQLServer 2014, IIS 8, PHP 5.5.21

Thanks

In reply to Thomas College

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Joseph Inhofer -

Thomas,

I did some testing with your information and was able to reproduce the issue in both our instance and the core instance of Moodle. This issue is that Internet Explorer 11 has where it is giving the wrong height information to the YUI Javascript file that is being executed. There is a workaround, but requires a change in the javascript file to obtain the overall height of the element and then account for the widths of margins, padding, and borders.


I can give you the finer details of the code changes that I made if you would like. 

In reply to Joseph Inhofer

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Thomas College -

Hi Joseph, 

Thanks for the reply.  If you would be able to provide finer details for the necessary code changes, it would be appreciated.

Thanks

In reply to Thomas College

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Joseph Inhofer -

Thomas,

Here is the git show for the changes that I made on my end. It basically checks for Internet Explorer, then if it finds IE will obtain the height using .get() then accounting for the padding, margins, and borders. This process will return the correct height for all browsers, but I added the if() clause to prevent any other browsers from going through the extra steps since .getComputedStyle() works for all browsers except IE.

--- a/grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js

+++ b/grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js

@@ -477,13 +477,23 @@ FloatingHeaders.prototype = {


         // Generate the new fields.

         userColumn.each(function(node) {

+            var height = node.getComputedStyle(HEIGHT);

+            //Nasty hack to account for Internet Explorer

+            if(Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject) {

+                var allHeight = node.get('offsetHeight');

+                var marginHeight = parseInt(node.getComputedStyle('marginTop'),10) + parseInt(node.getComputedStyle('marginBottom');

+                var paddingHeight = parseInt(node.getComputedStyle('paddingTop'),10) + parseInt(node.getComputedStyle('paddingBottom');

+                var borderHeight = parseInt(node.getComputedStyle('borderTopWidth'),10) + parseInt(node.getComputedStyle('borderBottom');

+                height = allHeight - marginHeight - paddingHeight - borderHeight;

+            }

             // Create and configure the new container.

             var containerNode = Y.Node.create('<div></div>');

             containerNode.set('innerHTML', node.get('innerHTML'))

                     .setAttribute('class', node.getAttribute('class'))

                     .setAttribute('data-uid', node.ancestor('tr').getData('uid'))

                     .setStyles({

-                        height: node.getComputedStyle(HEIGHT),

+                        height: height,

                         width:  node.getComputedStyle(WIDTH)

                     });

In reply to Joseph Inhofer

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Thomas College -

Hi Joseph, 

Thanks for the quick reply.  I'll attempt make the changes that you listed above (I'm know next to nothing about javascript coding).

I've created a Moodle bug tracker for this as well.

Thanks!

In reply to Joseph Inhofer

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Thomas College -

Hi Joseph, 

I believe I've made the additions to the floatingheaders.js file properly, but didn't see any improvement.  I started at line 478 of the version 2.8.5 floatingheaders.js file, added the additional lines, and commented out the one that was marked to be removed.  Here's the code as I've added it: 

         // Generate the new fields.

userColumn.each(function(node) {

var height = node.getComputedStyle(HEIGHT);

//Nasty hack to account for Internet Explorer

if(Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject) {

var allHeight = node.get('offsetHeight');

var marginHeight = parseInt(node.getComputedStyle('marginTop'),10) + parseInt(node.getComputedStyle('marginBottom');

var paddingHeight = parseInt(node.getComputedStyle('paddingTop'),10) + parseInt(node.getComputedStyle('paddingBottom');

var borderHeight = parseInt(node.getComputedStyle('borderTopWidth'),10) + parseInt(node.getComputedStyle('borderBottom');

height = allHeight - marginHeight - paddingHeight - borderHeight;

}

// Create and configure the new container.

var containerNode = Y.Node.create('<div></div>');

containerNode.set('innerHTML', node.get('innerHTML'))

.setAttribute('class', node.getAttribute('class'))

.setAttribute('data-uid', node.ancestor('tr').getData('uid'))

.setStyles({

// height: node.getComputedStyle(HEIGHT),

height: height,

width:  node.getComputedStyle(WIDTH)

});


Did I miss something?

Thanks

In reply to Thomas College

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Joseph Inhofer -

Thomas,

You mentioned that you don't know much about javascripting, so it's possible that the javascript files are not being loaded. This could be due to one of the following causes:

  1. You have not executed shifter. This needs to be run over grade/report/grader/yui/src/gradereporttable/
  2. You have not purged your caches. This can be done on your Moodle site at www.yoururl.com/admin/purgecaches.php

Make sure you have executed both steps in that order. If that still does not work, add this:

    var height = node.getComputedStyle(HEIGHT);
+    alert("hit");
    //Nasty hack to account for Internet Explorer

Then repeat the above steps. If you don't see the browser giving you the message of "hit" multiple times upon accessing the page, then the javascript file is not being loaded. If you are seeing the message and not seeing the intended function of the change, let me know and we'll take a closer look at the javascript file.


Please let me know if you have any questions about the above steps!

In reply to Joseph Inhofer

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Perry Way -

Perhaps it's because of three missing closing parenthesis in the code you provided. I had to add parenthesis. 

Before:

var marginHeight = parseInt(node.getComputedStyle('marginTop'),10) + parseInt(node.getComputedStyle('marginBottom');
var paddingHeight = parseInt(node.getComputedStyle('paddingTop'),10) + parseInt(node.getComputedStyle('paddingBottom');
var borderHeight = parseInt(node.getComputedStyle('borderTopWidth'),10) + parseInt(node.getComputedStyle('borderBottom');

After:

var marginHeight = parseInt(node.getComputedStyle('marginTop'),10) + parseInt(node.getComputedStyle('marginBottom'));
var paddingHeight = parseInt(node.getComputedStyle('paddingTop'),10) + parseInt(node.getComputedStyle('paddingBottom'));
var borderHeight = parseInt(node.getComputedStyle('borderTopWidth'),10) + parseInt(node.getComputedStyle('borderBottom'));
In reply to Perry Way

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Perry Way -

Actually this works in IE 10.0.9200.x but it still does not work in IE 11.0.9.x.

Does anyone know how to fix this bug? I am about to add in a few pixels manually just to make it align right, even though that is horrible practice.

In reply to Perry Way

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Bob Puffer -

Perhaps you will find my suggestion unhelpful but I'll send it out anyway -- quit using IE. It's going away, there are many other known issues with IE, notably in quizzes and questionnaire. It has always been a problem for developers. We block it through our theme and only allow it with Surface RT since there's no other choice.

In reply to Bob Puffer

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Perry Way -

Being a solid Chrome user for years, I wouldn't have known about this problem had it not been for an instructor that has a preference towards Internet Explorer even after being urged to use Chrome.  I can't just tell our users to stop using Internet Explorer.

In reply to Perry Way

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by sean mcclelland -

We steer all of our users away from IE, for EVERYTHING, not just Moodle. We have been doing it for years. Sure, FF and Chrome aren't perfect either, but IE is a nightmare wink. And we don't frame it like an ultimatum, they can use what they want, but "for the best experience, we recommend FF or Chrome." Helping someone install a different browser is easier than troubleshooting a browser-specific issue, and we just don't have the man-power to address those issues.

In reply to Perry Way

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Thomas College -

Hi All,

This should be fixed in upcoming versions.  The bug tracker is here:  https://tracker.moodle.org/browse/MDL-49764

Thanks

In reply to Thomas College

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Perry Way -

Hi Thomas, 

Do you know what the end results were in terms of code changes? I tried to follow that tracker but I'm not seeing any resolution specifically there. I saw the part where 

//Nasty hack to account for Internet Explorer
if (Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject)

becomes

if (Y.UA.ie !== 0)

but I tried it and it still does not work. Thanks!

In reply to Perry Way

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Thomas College -

Hi Perry,

I'm not sure what the end results were.  We're waiting for the new Moodle version to be released for the fix.

Thanks

In reply to Perry Way

Re: Gradebook scrolling, Editing on, in Internet Explorer 11

by Bob Puffer -

It never fails to amaze me when educators fail to master the most important learning tool on the planet... the browser.