cancel
Showing results for 
Search instead for 
Did you mean: 
progacki
Community Participant

How to trouble shoot custom code?

Jump to solution

We are having an issue caused by our custom code and I hope to get some hints on how to trouble shoot it. I'm a Canvas admin who is relatively new to Canvas.

A former employee wrote some of our custom code and we also hired a firm to create templates in Canvas and they wrote some custom JS and CSS.

The issue we're having is the Forgot Pasword? link on our login page sends out the email appropriately, but when a student clicks on the link to reset their password, they are taken to a blank page. If I append "?global_includes=0" to that URL the page comes up with the entry forms for changing one's password.

I have attached screenshots of both the blank screen and the one that works.

Can someone please point me toward how to trouble shoot this?

thanks!

Phil

1 Solution

Accepted Solutions
robotcars
Community Champion

Hi Phil,

Sorry you're experiencing this.

This is a problem with custom solutions and unvetted code. Developers not paying attention to the house they are in. Standing out to me is the duplication of jQuery and Bootstrap in an environment where existing versions are available. I'm certain that Canvas deals with these conflicts for us.

Our forgot password button does something completely different, but I have a developer instance of Canvas I was able to test this on. This is the default screen. You can see the reset password page in Canvas has the body with class modal.

291343_Screen Shot 2018-09-19 at 12.40.05 PM.png

Comparing Bootstrap 3.3.7, which is pasted into your global CSS, line 6271 is the issue.

The pasted in Bootstrap code is hiding the body, this is why ?global_includes=0 makes it work.

Here is the bandaid...

ExistingReplace
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
.modal:not(body) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Once you've fixed this, I would start triaging...

I recommend reviewing and deprecating the extra jQuery and Bootstrap and developing alternative and simpler solutions that are based on what's available in Canvas, or custom code that can be self-supported. Canvas updates every 3 weeks*, and statically pasting versions of jQuery and Bootstrap into the environment is going to have unpredictable results. If you really need custom development work done check with your CSM about Canvas Partners, and find developers who understand Canvas and your needs.

*Whoever develops or adds custom code (for your institution) to Canvas should be assigned a task on Monday's after each Release to review all the changes and test your own code, making sure they work, fixing what doesn't and replacing/removing anything that's outdated. Unless you can dedicate a position/time to this task, it's probably best to keep Canvas out of the box, or use what's available and supported by the community.

Please feel free to DM me or reply, I can try to answer any questions or share our workflow.

View solution in original post

4 Replies
robotcars
Community Champion

Hi Phil,

Sorry you're experiencing this.

This is a problem with custom solutions and unvetted code. Developers not paying attention to the house they are in. Standing out to me is the duplication of jQuery and Bootstrap in an environment where existing versions are available. I'm certain that Canvas deals with these conflicts for us.

Our forgot password button does something completely different, but I have a developer instance of Canvas I was able to test this on. This is the default screen. You can see the reset password page in Canvas has the body with class modal.

291343_Screen Shot 2018-09-19 at 12.40.05 PM.png

Comparing Bootstrap 3.3.7, which is pasted into your global CSS, line 6271 is the issue.

The pasted in Bootstrap code is hiding the body, this is why ?global_includes=0 makes it work.

Here is the bandaid...

ExistingReplace
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
.modal:not(body) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Once you've fixed this, I would start triaging...

I recommend reviewing and deprecating the extra jQuery and Bootstrap and developing alternative and simpler solutions that are based on what's available in Canvas, or custom code that can be self-supported. Canvas updates every 3 weeks*, and statically pasting versions of jQuery and Bootstrap into the environment is going to have unpredictable results. If you really need custom development work done check with your CSM about Canvas Partners, and find developers who understand Canvas and your needs.

*Whoever develops or adds custom code (for your institution) to Canvas should be assigned a task on Monday's after each Release to review all the changes and test your own code, making sure they work, fixing what doesn't and replacing/removing anything that's outdated. Unless you can dedicate a position/time to this task, it's probably best to keep Canvas out of the box, or use what's available and supported by the community.

Please feel free to DM me or reply, I can try to answer any questions or share our workflow.

View solution in original post

robotcars
Community Champion

There are test and beta instances available for anything you want to try before adding or removing from production.

edu.test.instructure.com and edu.beta.instructure.com

progacki
Community Participant

Robert,

Thank you very much for that simple solution.

Since notifications are off for test and beta, I didn't see a way to test this except for putting it in production.

I made the change in our system and it fixed the issue without causing any issues that I have found.

This is what I did:
- went into the Theme Editor, clicked View File by my css file to get a copy of the file;
- made a backup copy of the file and named it appropriately;
- made the change to the working copy of the file; and
- clicked Select for the css file and chose the working copy of the file

- previewed and saved the theme.

Thanks again!

Phil

robotcars
Community Champion

You're welcome Phil

I'm happy that worked for you and that it was a simple fix.