Gradebook alignment issue.

[vaughany]

Hi there. We're having an issue with this otherwise wonderful theme, which I've not seen reported anywhere else. We're using Moodle 2.7.1+ (20140821) with version 20140813 of Archaius. The problem is reproducible in Chrome 37 and Firefox 32 on Ubuntu 14.04, as well as Chrome (unknown version) on Windows 7.

This first image shows the problem: the grades part of the gradebook does not line up with the user's names part of the gradebook:

This second image shows me finding out (via Chrome's DevTools) that there is some extra top and bottom padding being applied to that part of the gradebook:

This last image shows that removing the top and bottom padding solves the issue (but only for the current session):

So removing that top and bottom padding seems to solve the problem, but I cannot find that CSS style in any stylesheet in theme/archaius/ or theme/base/, only in the 'all' file which the web browser loads but which doesn't seem to exist anywhere (probably only in Moodle's cache somewhere).

[dmuneras]

Hi @vaughany,

Thanks for reporting the issue, let me take a look of this more carefully.

Also, if you have time, I really appreciate if you can answer this short questionnaire about my theme, it is part of my master degree project, so, it will be really helpful. If you know more moodle administrators and developers that use my theme I will be glad if you share this link.

https://docs.google.com/forms/d/1Q_jXA_rPq0nGbHLn8mSsAA37dnD_A254S712reczFm0/viewform

Best regards, Daniel.

[vaughany]

Hi Daniel. Thanks for the fast response.

I completed your questionnaire last week so I'd better not do it again! But I will tweet out a link to it. :)

[vaughany]

Some further information from a colleague:

If you turn off static usernames for the Grader Report (Administration / Site Administration / Grades / Report Settings / Grader Report, then uncheck 'Static students column' and save changes) the names line up with the data as expected, albeit with a minor visual issue (highlighted in the image) and the horizontal scrolling is laggy.

So it's a solution of sorts for now as people will start using the gradebook as of tomorrow, but the lack of static usernames does make the gradebook that little more difficult to use.

[dmuneras]

Hi @vaughany

You couldn't find that CSS rule on my theme, because I didn't add it, it is a rule from other component of Moodle.

You can add a rule in your custom CSS and override the rule and solve the problem .

Go to Site Administration -> Appearance -> Themes -> Archaius and Add this rule to your custom CSS.

.path-grade-report-grader .left-scroller{ padding-top:5px;}

The problem is related with the wrapper of the element to make the users' column static.

Take a look of the video: http://quick.as/4zyqf6kl

I hope it solves the problem.

Best regards, Daniel.

[dmuneras]

I seems to be a general problem, it doesn't happen only with Archaius.

I will take a deeper look and maybe report the error to Moodle. If you have time to do it, feel free to report it, because other people could have the same problem with other themes.

BTW: Technically you solve the problem. :dancers:

Best regards, Daniel.

[dmuneras]

@vaughany I FORGOT TO SAY:

THANKS A LOT FOR ANSWER THE SURVEY, IT IS VERY IMPORTANT FOR ME.

[vaughany]

Hi Daniel. Thanks for your responses, and also for the video response! It was most welcome.

The code you posted didn't work initially due to .left-scroller instead of .left_scroller, and didn't have the desired results, as the 'name' rows were still too tall compared to the rows with the grades in. I'm no CSS expert so I don't know why, but I kept tinkering and after a lot of trial and error I ended up with the following:

/* Pushing the top down. */
.path-grade-report-grader .left_scroller {
    padding-top: 20px;
}

/* Shrinking the 'name' cells. */
.path-grade-report-grader div.left_scroller tr,
.path-grade-report-grader div.right_scroller tr,
.path-grade-report-grader div.left_scroller td,
.path-grade-report-grader div.right_scroller td,
.path-grade-report-grader div.left_scroller th,
.path-grade-report-grader div.right_scroller th {
    padding-top: 1px;
    padding-bottom: 1px;
}

The alignment is perfect in Chrome and only a couple of pixels off in IE, and everything lines up, which is the most important bit.

Thanks for your help. Your theme is excellent and I hope to see it develop further. :)

[Suzanadams]

Hello Guys,

Thank you for helping us out.If you guys are using BCU theme, I fixed it by adding the following CSS code on the theme settings to fix the grade book, because the top headers get messed up, in order to solve this try:

.path-grade-report-grader div.left_scroller td, .path-grade-report-grader div.right_scroller td, .path-grade-report-grader div.left_scroller th, .path-grade-report-grader div.right_scroller th { font-size: 10px; height: 6.5em;
}

.container-fluid { max-width: 100%; padding-right: 0px; padding-left: 0px; }

Regards,

Suzan