With Collapsed Topics - Edit Quiz page displays oddly

With Collapsed Topics - Edit Quiz page displays oddly

by S. Ali -
Number of replies: 21

Hello Gareth,

Collapsed Topics: 2015062202    2.9.1.2

Moodle: 2.8.5+ (Build: 20150414) and 2.9.1+ (Build: 20150723)

 

Whilst testing the Essential theme I came across an issue where the Edit Quiz page is not displayed as expected with Editing On.

Further testing indicated that it may be due to the Collapsed Topics course format as it occurs with the Clean Theme as well, but not with another course format such as Topics.

 

With Editing on - the marks appear on the left and overlap the Question name which is partially displayed:

 

 

Note that even when there are no marks e.g. for a description "question type" the name is truncated:

With Editing off - displays normally:

 

Regards,

s.ali

Average of ratings: -
In reply to S. Ali

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Odd on a few levels because:

  • Collapsed Topics styles combined with all modules and formats, so even if the topics format then the styles are there.  Thus issue would manifest itself in the topics format too.
  • Collapsed Topics only active for the 'course' layout.  Quiz being a module will be 'incourse' layout where course formats have no influence.
  • Essential does override Collapsed Topics renderer but not styles and see previous bullet point.
  • Essential has specific Quiz code, thus a version destined for M2.9 will not work with M2.8 and vice versa.
  • Collapsed Topics is also carefully created for each specific major Moodle version.

I'll need time to check.

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Gold star to you S.Ali, well spotted, its an unexpected anomaly with a style in the format that has existed since the M2.6 version.  I think I have a solution.

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Fixed in: https://github.com/gjb2048/moodle-format_topcoll/commit/1ba30a0fca64bbdb99a0fc1d0d305f80a6ec56bf - release shortly.

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by S. Ali -

Thank you Gareth.

Works fine.

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Gareth,

This is interesting, that something in Collapsed Topics was affecting the display when creating a quiz.  I had seen that quiz display problem, but I thought it was a browser (Safari) problem.  Your fix worked fine, of course.

This made me wonder about some of my other display issues, and whether or not being in edit mode would fix other problems.  I found at least two more that might be affected by some of your Collapsed Topics code.

When grading an assignment, if I am in edit mode I get 100% width, but in non-edit mode the width is something less.  Look at my attachment, which is what I see when I inspect the code.  I notice "class="format-topcol..."

The id for this page is “id="page-mod-assign-view"

Same thing happens in “page-mod-forum-view.”

And also with “page-mod-forum-discuss”

I am not sure if you want me to keep looking for other problems, or if you will be able to discover a solution that is a bigger fix that fixes all of these problems.  My theme is MORE.  Let me know if you want me to try anything else to dig a little deeper.


Attachment Gareth Problem.jpg
Average of ratings: -
In reply to Rick Jerz

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Hi Rick,

Please do keep looking thank you.  The class 'format-topcoll' will always be there in the body classes for Collapsed Topics modules.  The thing is when specific elements are actually affected.  So to clarify, when grading an assignment then the width is different out of edit mode?  Does this happen when 'Topics' is the course format?  What is the specific issue with the other pages please?

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Cannot replicate assignment grade issue....

Attachment 2015-08-02 23_43_36-Assignment.jpg
Attachment 2015-08-02 23_45_36-Assignment.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Gareth, thanks for your reply.  This is an interesting issue, and as I looked into it, I couldn't verify that it has anything to do with Collapsed Topics, so it is probably not in your jurisdiction.  But here's the problem.


I have added some custom CSS to MORE in order to get the center display to be full width.  The code looks like this  below (yep, a lot of these fixes.)  However, I am finding that some of this code reacts differently when in edit mode, or when not in edit mode.  I will attach another screenshot showing this.  Maybe Mary will have some insight.

Here's my CSS code to try to force full width:

/* Move main content left. Note: This will erase any blocks to the left. 

This might be eventually fixed with MDL-47156 */

#page-grade-report-grader-index #region-main,

#page-admin-setting-themesettingmore #region-main,

#page-course-edit #region-main,

#page-grade-edit-tree-index #region-main,

#page-enrol-instances #region-main,

#page-grade-report-singleview-index  #region-main,

#page-admin-user #region-main,

#page-question-edit #region-main,

#page-question-import #region-main,

#page-admin-report-log-index #region-main,

#page-user-editadvanced #region-main,

#page-admin-setting-appearance #region-main,

#page-admin-roles-define #region-main,

#page-grade-report-history-index #region-main,

#page-report-progress-index #region-main,

#page-admin-setting-debugging #region-main,

#page-mod-quiz-report #region-main,

#page-grade-edit-letter-index #region-main,

#page-report-outline-user #region-main,

#page-question-type-description #region-main,

#page-backup-restore #region-main,

#page-enrol-unenroluser #region-main,

#page-enrol-users #region-main,

#page-backup-backupfilesedit #region-main,

#page-course-management #region-main,

#page-backup-restorefile #region-main,

#page-mod-forum-discuss #region-main,

#page-mod-forum-view #region-main,

#page-mod-assign-view #region-main,

#page-mod-forum-post #region-main,

#page-user-forum #region-main,

#page-mod-forum-search #region-main,

#page-report-log-index #region-main,

#page-grade-report-user-index #region-main

{

    width: 100%;

}


Attachment Gareth2.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Gareth, thanks for your reply.  This is an interesting issue, and as I looked into it, I couldn't verify that it has anything to do with Collapsed Topics, so it is probably not in your jurisdiction.  But here's the problem.


I have added some custom CSS to MORE in order to get the center display to be full width.  The code looks like this  below (yep, a lot of these fixes.)  However, I am finding that some of this code reacts differently when in edit mode, or when not in edit mode.  I will attach another screenshot showing this.  Maybe Mary will have some insight.

Here's my CSS code to try to force full width:

/* Move main content left. Note: This will erase any blocks to the left. 

This might be eventually fixed with MDL-47156 */

#page-grade-report-grader-index #region-main,

#page-admin-setting-themesettingmore #region-main,

#page-course-edit #region-main,

#page-grade-edit-tree-index #region-main,

#page-enrol-instances #region-main,

#page-grade-report-singleview-index  #region-main,

#page-admin-user #region-main,

#page-question-edit #region-main,

#page-question-import #region-main,

#page-admin-report-log-index #region-main,

#page-user-editadvanced #region-main,

#page-admin-setting-appearance #region-main,

#page-admin-roles-define #region-main,

#page-grade-report-history-index #region-main,

#page-report-progress-index #region-main,

#page-admin-setting-debugging #region-main,

#page-mod-quiz-report #region-main,

#page-grade-edit-letter-index #region-main,

#page-report-outline-user #region-main,

#page-question-type-description #region-main,

#page-backup-restore #region-main,

#page-enrol-unenroluser #region-main,

#page-enrol-users #region-main,

#page-backup-backupfilesedit #region-main,

#page-course-management #region-main,

#page-backup-restorefile #region-main,

#page-mod-forum-discuss #region-main,

#page-mod-forum-view #region-main,

#page-mod-assign-view #region-main,

#page-mod-forum-post #region-main,

#page-user-forum #region-main,

#page-mod-forum-search #region-main,

#page-report-log-index #region-main,

#page-grade-report-user-index #region-main

{

    width: 100%;

}


Attachment Gareth2.jpg
Average of ratings: -
In reply to Rick Jerz

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Hi Rick,

That solution is incomplete for the problem you are attempting to solve. There needs to be other changes too.  I need to think of examples with links to code as I've already made changes as such in Shoelace, Shoehorn, Campus and Essential.  Tricky to link URL's on iPod Touch!

Kind regards,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Yes, I seek a better solution.  The problem that I am trying to solve is the empty, and wasted screen space that occurs to the left (and also to the right) of many of Moodle's main content screens.  The wasted space might be occurring because Moodle thinks that there might be something in the left or right column.  Mary Evan's awhile ago provided me this CSS code, which works most of the time, but now I know that some of these fixes depend upon whether or not I am in Edit mode.

As you are working with, and designing themes, I am sure that you are seeing the problem that I see.  I hope that there

Average of ratings: -
In reply to Rick Jerz

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Hi Rick,

Ok, looks like the other week I created a 'LESS' only solution in Campus (so much on the brain!), its a PHP LESS compiled theme so the code should work in More:

@media (min-width: 768px) {
    .path-grade-report, #page-admin-plugins {
        #region-main {
            width: auto;
            float: left;
        }
        .block-region {
            width: 100%;
            margin: 0;
            padding-left: 8px;
            padding-right: 8px;
            .block {
                .makeColumn(4);
            }
        }
    }
}

Where with '.path-grade-report, #page-admin-plugins' you can replace with the body attributes as desired.  Whereas Essential does: https://github.com/gjb2048/moodle-theme_essential/blob/MOODLE_28/layout/includes/pagesettings.php#L143-L159 - https://github.com/gjb2048/moodle-theme_essential/blob/MOODLE_28/layout/columns2.php#L62-L74 - to use the 'footer block' technology previously introduced in Shoelace.

Cheers,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Okay, I will give this a try sometime this week.  In a moment, I will be driving to MoodleMoot Minneapolis.

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Gareth, I got back to this problem, tried adding your code, and it did not help.

Along the way, I found that this following code while on this page works:

.row-fluid [class*="span"]:first-child {

    width: 100%;

}

Just adding this by itself into the custom CSS box is an overkill, since all main content pages are full width, pushing left and right columns down.

So I began to wonder if there is a selective way to apply this code.  I tried, but had no luck.  Maybe you (or Mary) know the form of the correct code.  Below is essentially the way I think I want to do it, but it is not in proper form. (In other words, how do I apply the row-fluid [class*="span"]:first-child {width:100%} only to these three pages?)


#page-grade-report-grader-index #region-main,

#page-admin-setting-themesettingmore #region-main,

#page-course-edit #region-main

{

row-fluid [class*="span"]:first-child {

    width: 100%;

}

}

Average of ratings: -
In reply to Rick Jerz

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Hi Rick,

I believe you need:

#page-grade-report-grader-index #region-main row-fluid [class*="span"]:first-child,
#page-admin-setting-themesettingmore #region-main row-fluid [class*="span"]:first-child,
#page-course-edit #region-main row-fluid [class*="span"]:first-child {
    width: 100%;
}

Cheers,

Gareth

P.S.  My code was in LESS and not CSS, sorry, if the above does not work, let me know and I'll post the CSS version.

Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

I tried your suggestion, and it didn't work.  I am going to provide a graphic showing what I see in my browser's inspector, for when I go into a forum.  This picture is with "edit course off".  When in edit mode and I go to this forum, the white main column expands to full width.

Attachment span problem.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Gareth, I continue experimenting.  This code below seems to work.  How do I combine these two into better form, since I have a bunch of regions to work on.   You might also notice that I am not including the #region-main, in these.  I am not sure what problems this might cause, or fix.

This works:

#page-mod-forum-view

.row-fluid [class*="span"]:first-child {

    width: 100%;

}

#page-mod-assign-view

.row-fluid [class*="span"]:first-child {

    width: 100%;

}

This does not work:

#page-mod-forum-view,

#page-mod-assign-view

.row-fluid [class*="span"]:first-child {

    width: 100%;

}


Average of ratings: -
In reply to Rick Jerz

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers 
#page-mod-forum-view .row-fluid [class*="span"]:first-child,
#page-mod-assign-view .row-fluid [class*="span"]:first-child {
    width: 100%;
}
Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

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

Or:

.path-mod #region-main .row-fluid [class*="span"]:first-child {
    width: 100%;
}
Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers 
#page-grade-report-grader-index #region-main row-fluid [class*="span"]:first-child,
#page-admin-setting-themesettingmore #region-main row-fluid [class*="span"]:first-child,
#page-course-edit #region-main row-fluid [class*="span"]:first-child {
    width: 100%;
}

should have been:

#page-grade-report-grader-index #region-main .row-fluid [class*="span"]:first-child,
#page-admin-setting-themesettingmore #region-main .row-fluid [class*="span"]:first-child,
#page-course-edit #region-main .row-fluid [class*="span"]:first-child {
    width: 100%;
}
Average of ratings: -
In reply to Gareth J Barnard

Re: With Collapsed Topics - Edit Quiz page displays oddly

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers 
page-mod-forum-view .row-fluid [class*="span"]:first-child,
#page-mod-assign-view .row-fluid [class*="span"]:first-child {
    width: 100%;
}


Thanks Gareth.

Of everything you provide, this one (above) worked. (I did try your other suggestions, but I could not get them to work.)

I noticed that on some pages, leaving out the "#region-main" caused an "administration" block to show on the left, so I had to leave in my old CSS code and then add the new code.  It's a bit awkward, but it works.  I hope that this situation gets fixed in core someday.

I will attach a text file showing you all of the code that I am using.

Average of ratings: -