Moodle
  1. Moodle
  2. MDL-21088

vertical alignment problem on grader report in IE with static student columns

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Trivial Trivial
    • Resolution: Fixed
    • Affects Version/s: 1.9.7
    • Fix Version/s: 1.9.8
    • Component/s: Gradebook
    • Labels:
      None
    • Affected Branches:
      MOODLE_19_STABLE
    • Fixed Branches:
      MOODLE_19_STABLE
    • Rank:
      31820

      Description

      There is an alignment issue with the grader report. In IE 8 with static student columns turned on rows do not line up correctly. Screenshot attached.

      There's no problem with static student columns turned off. It appears whether editing is on or off but it is worse with editing on.

      1. index.patch
        1.0 kB
        Andrew Davis
      2. index2.patch.txt
        1 kB
        Andrew Davis
      3. index3.patch
        1 kB
        Andrew Davis
      4. lib2.patch.txt
        2 kB
        Andrew Davis
      5. lib3.patch
        2 kB
        Andrew Davis
      6. styles.patch
        1.0 kB
        Andrew Davis
      7. styles2.patch.txt
        1 kB
        Andrew Davis
      8. styles3.patch
        1 kB
        Andrew Davis
      9. user_styles.patch
        0.7 kB
        Andrew Davis
      10. user_styles2.patch.txt
        0.7 kB
        Andrew Davis
      1. IE8EditingOn.gif
        32 kB

        Issue Links

          Activity

          Hide
          Andrew Davis added a comment -

          The vertical alignment problem in IE 8 is caused by the bug fix introduced to fix an alignment bug in IE 7. Simply removing the javascript introduced in this revision makes everything line up in IE 8.

          http://cvs.moodle.org/moodle/grade/report/grader/index.php?r1=1.65.2.16&r2=1.65.2.17

          Presumably however, removing it would reintroduce the IE 7 problem. I'm trying to get hold of IE 7 to test this.

          Show
          Andrew Davis added a comment - The vertical alignment problem in IE 8 is caused by the bug fix introduced to fix an alignment bug in IE 7. Simply removing the javascript introduced in this revision makes everything line up in IE 8. http://cvs.moodle.org/moodle/grade/report/grader/index.php?r1=1.65.2.16&r2=1.65.2.17 Presumably however, removing it would reintroduce the IE 7 problem. I'm trying to get hold of IE 7 to test this.
          Hide
          Andrew Davis added a comment -

          These are probably the same issue or at least very closely related.

          Show
          Andrew Davis added a comment - These are probably the same issue or at least very closely related.
          Hide
          Andrew Davis added a comment -

          Ok, simply removing the table cell height adjusting Javascript from /grade/report/grader/index.php fixes the mis-alignment issue. I have tested this in firefox 3.5.5, safari 4.0.4, IE 8 and, using IE Tester, IE 6 and 7. With editing on and off. I can't see any display problems stemming from the removal of the height adjusting Javascript.

          Patch attached. I have just commented out the JS for the moment.

          Show
          Andrew Davis added a comment - Ok, simply removing the table cell height adjusting Javascript from /grade/report/grader/index.php fixes the mis-alignment issue. I have tested this in firefox 3.5.5, safari 4.0.4, IE 8 and, using IE Tester, IE 6 and 7. With editing on and off. I can't see any display problems stemming from the removal of the height adjusting Javascript. Patch attached. I have just commented out the JS for the moment.
          Hide
          Paul Vaughan added a comment -

          Brilliant, seems to work properly now.

          Show
          Paul Vaughan added a comment - Brilliant, seems to work properly now.
          Hide
          Paul Vaughan added a comment -

          Seems to work satisfactorily for courses with few assignments (and therefore few columns) but for courses with lots of columns, the titles are still compressed, forcing the rows down (as in the image I posted on MDL-19919) which causes the offset between the names and the grades.

          Show
          Paul Vaughan added a comment - Seems to work satisfactorily for courses with few assignments (and therefore few columns) but for courses with lots of columns, the titles are still compressed, forcing the rows down (as in the image I posted on MDL-19919 ) which causes the offset between the names and the grades.
          Hide
          Andrew Davis added a comment -

          Hi Paul. You mentioned you have modified the custom corners theme. Does your version of grade/report/grader/styles.php have the following at around line 444? The no wrap bit in particular.

          .heading_name_row th

          { white-space:nowrap; width:2000px; }

          I've attached a patch to grade/report/grader/styles.php which modifies some of the scrollbar behaviour. In IE 7 the horizontal scrollbar appears on top of the "overall average" row if overflow-x is left set to auto.

          Show
          Andrew Davis added a comment - Hi Paul. You mentioned you have modified the custom corners theme. Does your version of grade/report/grader/styles.php have the following at around line 444? The no wrap bit in particular. .heading_name_row th { white-space:nowrap; width:2000px; } I've attached a patch to grade/report/grader/styles.php which modifies some of the scrollbar behaviour. In IE 7 the horizontal scrollbar appears on top of the "overall average" row if overflow-x is left set to auto.
          Hide
          Andrew Davis added a comment -

          I'm attaching a patch to user_styles.css from within the custom corners theme. This fixes another source of misalignment.

          Paul, I've been able to reproduce the behaviour you're seeing although I don't have a fix for it as yet. I can make a course with lots of assessments squish up and mess up alignment in IE 7 with static student names and editing turned on.

          Show
          Andrew Davis added a comment - I'm attaching a patch to user_styles.css from within the custom corners theme. This fixes another source of misalignment. Paul, I've been able to reproduce the behaviour you're seeing although I don't have a fix for it as yet. I can make a course with lots of assessments squish up and mess up alignment in IE 7 with static student names and editing turned on.
          Hide
          Andrew Davis added a comment - - edited

          Attaching updated patches. I think this about does it although this will need more testing. I removed some css elements that caused problems in IE. Their removal didn't seem to cause any problems I have noticed in any browser.

          I put some conditional logic around some of the grader report's initialization Javascript as the JS solves a problem in IE 7 but causes problems in other browsers.

          Paul, I think this should fix the alignment problem you are experiencing.

          Tested this in Firefox 3.5.6, IE 6, 7 and 8 and Safari 4.0.4

          Also, note that one of the problems is that IE 7 doesnt appear to obey nobreaks on TDs correctly. That's why I added code that switches out regular spaces in favour of non-breaking spaces. As an alternative we could put spans within the tds and put the nobreaks on the spans.
          http://gramotei.wordpress.com/2008/01/15/internet-explorer-ie-ignores-white-space-nowrap-on-tables-td/

          Show
          Andrew Davis added a comment - - edited Attaching updated patches. I think this about does it although this will need more testing. I removed some css elements that caused problems in IE. Their removal didn't seem to cause any problems I have noticed in any browser. I put some conditional logic around some of the grader report's initialization Javascript as the JS solves a problem in IE 7 but causes problems in other browsers. Paul, I think this should fix the alignment problem you are experiencing. Tested this in Firefox 3.5.6, IE 6, 7 and 8 and Safari 4.0.4 Also, note that one of the problems is that IE 7 doesnt appear to obey nobreaks on TDs correctly. That's why I added code that switches out regular spaces in favour of non-breaking spaces. As an alternative we could put spans within the tds and put the nobreaks on the spans. http://gramotei.wordpress.com/2008/01/15/internet-explorer-ie-ignores-white-space-nowrap-on-tables-td/
          Hide
          Andrew Davis added a comment -

          On reflection adding a span within the th's then modifying the styles to apply to a nowrap to the spans is a better approach. That makes the troublesome height adjusting Javascript unnecessary.

          Martin is reviewing this today so should hopefully have this all committed this afternoon.

          Show
          Andrew Davis added a comment - On reflection adding a span within the th's then modifying the styles to apply to a nowrap to the spans is a better approach. That makes the troublesome height adjusting Javascript unnecessary. Martin is reviewing this today so should hopefully have this all committed this afternoon.
          Hide
          Andrew Davis added a comment -

          Talked this through with martin. Committing.

          Show
          Andrew Davis added a comment - Talked this through with martin. Committing.

            People

            • Votes:
              2 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: