Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Barbara Taylor -
Number of replies: 11

Hello,

I'm not sure if this is a theme issue or something else.  When we scroll past the first few grade items to the point where the email address of the user isn't being displayed, the grade book locks and grade items cannot be entered.  The "controls" above the email address becomes enlarged. 

grade book grade items

If this is a grade book issue, how can this be fixed?  If it isn't a grade book issue, what could it be?

Thanks,

Barbara

Average of ratings: -
In reply to Barbara Taylor

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Are you scrolling horizontally or vertically?  What exact page is it (as there are many in Moodle)?  What steps do I need to do to replicate the issue?  Are there any errors on the 'console' at the browser end (press F12 for browser development tools and reload the page).  What other contributed plugins do you have installed?

In reply to Gareth J Barnard

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Barbara Taylor -

Hi Gareth,


I am scrolling horizontally.  The page is on the grader report page.  To replicate, create a course with more than 10 grade items.  Display first name, last name, and email address in the grade book.  Turn editing on.  Scroll past the email address column to the 6th item.  Try inputting the grade into the grade item.  We can't put in a grade item and can't click into the box.

I sat with one of our systems developers and he inspected the code on the page.  Once the page locked and the "Control" text became large, he inspected the element and found that this code in a div was causing the issue.

<div id="yui_3_17_2_1_1503360068845_381" class="floater sideonly floating" aria-hidden="true" role="presentation" style="left: 278px; position: absolute; top: 108px">


When we looked at the element it is:

.floating {

width: 50%;

float: right;

text-align: center;

color: #fff;

font-size: 45px;

}


When we uncheck:

width: 50%;

font-size: 45px;

The issue is resolved.  We can add grade items across the page and the "Controls" text remains normal size.


How can we comment those out so we can fix the issue?

Thanks,

Barbara



In reply to Barbara Taylor

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gareth,

I was looking at this late last night and found a large number of JavaScript instances where I the class "floating" was mentioned. Could it be that it is being added automatically based on calculations within the gradebook?

Just a thought...

Mary

In reply to Mary Evans

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

Oh the 'floating' class is a nightmare!  As soon as I've tried to change the layout from a blocks then content and table striping - ouch - mess!  The JS does appear to inject some CSS though but not the attributes Barbara mentions (I've not looked at the source JS only the markup when it floats).  At the moment it appears to me to be site specific alterations.

G

In reply to Barbara Taylor

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Barbara,

I cannot replicate nor find 'font-size: 45px' in any CCS / LESS files with the theme or the Moodle installation.  Therefore it must be custom CSS you have somewhere or in the 'Custom CSS' box of the theme settings.  The JS does inject CSS, however does not appear to change the font-size for me.

G

In reply to Gareth J Barnard

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Barbara Taylor -

Hi Gareth,

We see the 'floating' as well and when we removed it, it also fixed the issue.  This is what we see in the code.  Another developer said that it looks like JS is inserting CSS.  We don't have any custom code in our site.  We didn't have the issue until we upgraded to v3.2.1.3 and Moodle v 3.2.4 last Friday.  Could there be a conflict between the theme version and the Moodle version?  I'm not a programmer so I am not sure where to look or how to find the issue.

Thanks,

Barbara

theme code


theme code


In reply to Barbara Taylor

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I would hazard a guess it is coming from here:

../grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable.js

../grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js

In reply to Mary Evans

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

I can't find any 'font-size' changing JS in floatingheaders.js or gradereporttable.js.

G

In reply to Barbara Taylor

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Barbara,

We are effectively using the same versions of Essential and exactly the same version of Moodle and I still cannot replicate the issue or find that CSS.  I've followed the instructions and found 'Controls' but there is no font-size altering CSS.

Gareth

In reply to Barbara Taylor

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Alan Hovden -

Hi Barbara - You've probably solved this by now but I was able to fix this by adding the changes below to the Boost custom CSS.

You can't comment the CSS elements out as they will simply be replaced by the Javascript that is generating them. The elements "width" and "font-size" are still here but width has been set to do nothing basically.

Try a new font-size using "em" to see if that will fix the Control problem - I have no idea if that will help as I wasn't seeing that problem happening in my gradebook.


.gradeparent .floating {
    width: auto;
    min-width: 0px;
    float: right;
    text-align: center;
    color: #fff;
    font-size: 1em;
}

Cheers!

-Al

In reply to Alan Hovden

Re: Essential theme v3.2.1.3 and Moodle v 3.2.4 gradebook locks when scrolled

by Alan Hovden -

I shouldn't say "fix" - this is just a workaround smile