Gradebook scrolling, Editing on, in Internet Explorer 11

Gradebook scrolling, Editing on, in Internet Explorer 11

deur Thomas College -
Getal antwoorde: 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 antwoord op Thomas College

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

deur 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 antwoord op Joseph Inhofer

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

deur 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 antwoord op Thomas College

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

deur 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 antwoord op Joseph Inhofer

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

deur 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 antwoord op Joseph Inhofer

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

deur 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 antwoord op Thomas College

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

deur 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 antwoord op Joseph Inhofer

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

deur 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 antwoord op Perry Way

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

deur 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 antwoord op Perry Way

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

deur 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 antwoord op Bob Puffer

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

deur 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 antwoord op Perry Way

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

deur 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 knipoog. 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 antwoord op Perry Way

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

deur 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 antwoord op Thomas College

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

deur 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 antwoord op Perry Way

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

deur 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 antwoord op Perry Way

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

deur Bob Puffer -

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