Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-21088

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

    Details

    • Type: Bug
    • Status: Closed
    • Priority: 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

      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.

        Gliffy Diagrams

        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
            andyjdavis 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
            andyjdavis 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
            andyjdavis Andrew Davis added a comment -

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

            Show
            andyjdavis Andrew Davis added a comment - These are probably the same issue or at least very closely related.
            Hide
            andyjdavis 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
            andyjdavis 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
            vaughany Paul Vaughan added a comment -

            Brilliant, seems to work properly now.

            Show
            vaughany Paul Vaughan added a comment - Brilliant, seems to work properly now.
            Hide
            vaughany 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
            vaughany 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis 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
            andyjdavis Andrew Davis added a comment -

            Talked this through with martin. Committing.

            Show
            andyjdavis 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:
                  Fix Release Date:
                  25/Mar/10