Fix For Afterburner Gradebook Scrolling Problem

Fix For Afterburner Gradebook Scrolling Problem

by Alan Hovden -
Number of replies: 1

I've managed to do a fix for the Afterburner gradebook scrolling problem that works for me. It's not 100% perfect but it's going to make everyone here a lot happier. I found a few minor .css changes that will allow you to scroll horizontally through the whole gradebook at the top level of the browser. Previously I had to scroll to the bottom of the gradebook to find its horizontal scrollbar which was hidden below the "cut" of the web page if you have a large number of students in your course. This means you can now scroll horizontally anywhere in the gradebook. The only catch is that you have to have your blocks docked (Navigation, Settings etc). It won't work if they are visible in the gradebook itself. I think this is a minor inconvenience. Also, it only works in Firefox. There may be other fixes for other browsers but we recommend using Firefox at our university so I'm not going to explore other fixes.

It seems that only Afterburner based themes have this problem. The new Moodle 2.4 standard theme has been "fixed" and now behaves like the old 1.9 Moodle gradebook. You can scroll horizontally anywhere - and with or without blocks docked. Hopefully Afterburner will catch up with this change soon. (We recently met Marting Dougiamas at the Moodle Moot in Vancouver and a bunch of us brought the gradebook problem up with him. He wasn't aware of it at all and made a note for his developers right there in front of us - perhaps that's what precipitated the change in the new Moodle 2.4 that came out shortly afterwards?

Here's the .css additions that seemed to have fixed the problem:

Change to make gradebook scrollbars work at browser top level and allow vertical and  horizontal scrolling in gradebook report page:

moodle/theme/theme_name/styles.css

.page-grade-report-grader   .gradeparent {

    width:   -moz-fit-content;
    overflow: auto;
}

.pagelayout-report #page {

    background: none repeat scroll 0 0 transparent;
    margin: 0   auto;
    overflow:   visible;
    padding:   0;
    width:   -moz-fit-content;
}

 

 

In reply to Alan Hovden

Re: Fix For Afterburner Gradebook Scrolling Problem

by Alan Hovden -

I found that after applying my "fix" there were a few unexpected problems in layout for related pages in the gradebook (outcomes, overview and user report pages). I've done a fix for these as well and am still working on a solution for floating the tabs at the top of the grader report page to the left.

Remember this is a temporary solution and only works in Firefox.

Here's the fix for the page formatting problems in outcomes, overview and user report pages.

 


/* Gradebook HACK to keep Outcomes Page from collapsing in width */
.path-grade-report-outcomes #page {
    background: none repeat scroll 0 0 transparent;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
}

/* Gradebook HACK to keep Overview Report page from collapsing in width */
.path-grade-report-overview #page {
    background: none repeat scroll 0 0 transparent;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
}


/* Gradebook Report HACK to keep User Report page from collapsing in width */
.path-grade-report-user #page {
    background: none repeat scroll 0 0 transparent;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
}

 

And lastly this moves the tabs at the top of the grader report over to the right of the screen instead of centering it - which in a large gradebook can make it disappear horizontally to the right of your browser screen. But - at this point it only works on Firefox on a Mac.

 

.path-grade-report-grader .tabtree {
    left: -1100px;