cancel
Showing results for 
Search instead for 
Did you mean: 

Freeze top, left, and side banners of Canvas.

Freeze top, left, and side banners of Canvas.

(2)

I have suggested this in the past but it didn't seem to gain traction so I thought that I would bring the idea up again.  It is just a very annoying feature that could be correct rather easily I would imagine.  It would be nice if Canvas froze everything but the interior page.  In other words, let's say you are in the "Modules" page. When you scroll down, the way it is now everything scrolls and you lose site of your courses, grades, calendar, etc. as well as all of your global settings.  Depending on how long your "Modules" page is, for example, you even lose sight of the left hand navigation tabs as well (Home, Assignments, etc.)  I think that those should be stationary, just as if you were to lock columns or rows in Excel.

Please also refer to this closely related idea: https://community.canvaslms.com/ideas/6112-make-course-menu-sticky

91 Comments
jtorres1
Community Member

This worked beautifully for me with the exception of being able to scroll to the very bottom of the page. I am no longer able to see the "Settings" link. I can't scroll beyond a certain point so I have lost access to that. Could you assist?

Thanks!

hensonj
Community Member

working on a fix right now. we knew it happened but none of our courses have menus that long. I have a fix already but I'm trying to pretty it up for you.

jtorres1
Community Member

Thanks James! I really appreciate your help!

hensonj
Community Member

#section-tabs li.section:last-child {

    padding-bottom: 30px;

}

 

div#left-side {

    overflow: hidden !important;

    width: 180px;

}

 

div#left-side nav {

    overflow-y: auto;

    height: 100%;

    width: 100%;

    padding-right: 30px;

}

----------------------------------------------

BOOM!!!!

note: I know this is NOT the BEST way to accomplish what I'm doing but I gotta work with whats already in Canvas code and style it from there so this is the best solution I could easily come up with. Also, I have only applied to test and while there should be no adverse effect, I can not guarantee that everything will work perfectly. 

jtorres1
Community Member

Hi James,

Thank you for taking the time to work on this fix for us. Unfortunately, it did not work. The page just sort of keeps jumping over and over when I try to scroll. We'll keep working on our end. I appreciate your assistance!

dunnr
Surveyor

Maybe not freeze them but allow for a setting to allow the scroll lock so they don't move.  My district, Clark County School District has a wiki page for our lesson plans that allows us to lock the calendar in place while we scroll down our standards.

shannona_steuer
Community Member

I would personally like this feature, but I can see both sides of the comments. I think it would be best to have a locking option or to be able to collapse the main menu if someone prefers not to have it on every screen. This really comes down to personal preference so having options for a locked menu would be very helpful to people who want it, but would not hurt those who do not want to use it.

hensonj
Community Member

Left menu sticky:

/************************************************************
*************** BEGIN STICKY MENU jS ***********************
************************************************************/

/*switches left menu class to make it sticky and snap to top of page on scroll*/

$(function() {
var header = $(".ic-app-course-menu");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 63) {
header.removeClass('ic-app-course-menu').addClass("ic-app-course-menu-fixed");
} else {
header.removeClass("ic-app-course-menu-fixed").addClass('ic-app-course-menu');
}
});
});

/************************************************************
*************** END STICKY MENU jS *************************
************************************************************/

/************************************************************
*************** BEGIN STICKY MENU cSS **********************
************************************************************/

/*makes left menu sticky*/
.ic-app-course-menu {
position: fixed !important;
top: 70px;
left: 84px;
overflow-y: scroll;
height: 100%;
padding-bottom: 80px;
width: 207px !important;
}
/*makes left menu snap to top of page when scrolled.*/
.ic-app-course-menu-fixed {
position: fixed !important;
top: 8px;
left: 107px;
overflow-y: scroll;
height: 100%;
width: 144px;
}

.primary-nav-transitions .ic-app-course-menu-fixed {
left: 78px;
}

/*makes left menu snap to top of page when scrolled.*/
.ic-app-course-menu-fixed {
position: fixed !important;
top: 8px;
left: 107px;
overflow-y: scroll;
height: 100%;
width: 144px;
}

/*Changes left menu z-index so that it is not invisible on top of student names in gradebook*/
.with-left-side #left-side {
z-index: 0;
}

/*puts space below the settings tab*/
#section-tabs li.section:last-child {
padding-bottom: 30px;
}

/*creates parent div*/
div#left-side {
overflow: hidden !important;
width: 165px;
}

/* created scrollability and hides scrollbar*/
div#left-side nav {
overflow-y: auto;
height: 100%;
width: 100%;
padding-right: 30px;
}

/* removes term on scroll*/
.ic-app-course-menu-fixed #section-tabs-header-subtitle {
display: none;
}
/************************************************************
*************** END STICKY MENU CSS **********************
************************************************************/

vincent_rios199
Community Member

I think this is a great idea. Very useful and easy to use. @jivedocs_unfede 

james_sanzin
Community Member

This is an excellent idea that needs to be implemented. 

marnie_cedillos
Community Member

YES PLEASE! I hate having to scroll through the long conversation to get to the menu again. 

ashley_davis
Surveyor

I see a use case for the left-side being sticky, but as an Instructional Designer who also puts custom links in my left nav, I would end up hating it. I have some classes where you have to scroll to access the bottom parts of the left menu because it's so long. If the left side is sticky, then I'm going to have to scroll in 2 different places to access the full length of the page and the menu.

(Also, I actually hate the right side column of Canvas that, especially on the homepage, eats up an ungodly amount of unnecessary space denying us valuable real estate for our home pages!!!)

hensonj
Community Member

If you have access to the global CSS for your account, the following should be added:

/*removes the max-width so that pages will utilize space on larger screens*/

body:not(.full-width):not(.outcomes) .ic-Layout-wrapper {
max-width: none;
}

Stock Canvas Width

254752_stock_canvas_width.png

Adjusted Canvas Width

254783_adjusted_canvas_width.png

Honestly this seems like a no-brainer to me. Why they restrict how wide the content can be instead of just letting it fill the available space is anyone's guess.

chofer
Community Coach
Community Coach

If you don't want to mess with CSS, however, an admin for your school's Canvas instance could enable the "New User Tutorial" Feature Option at the account level which would also display content the full width of your browser window.

James
Navigator

Canvas did this briefly in a beta release earlier this year and then pulled it back before production to only apply to those who are using the new tutorial. They must have had a reason for doing it, so I would be careful of putting it into the Global JavaScript file. I do, however, have that in my user scripts that are run on my browsers. You'll probably also want to make sure that it doesn't run in an iframe. I don't remember the exact reason, but probably related to speedgrader.  The user script I use is available on my Canvancement GitHub site or here is a direct install link for those who already have a user script manager (Tampermonkey or Greasemonkey) installed

Also, it can be difficult for some people to follow information that far across a screen with the extra white space that gets added, so I can see why they might hesitate to remove the max-width.

hensonj
Community Member

We have been allowing full width pages since we first transitioned to canvas. Although we needed to change with canvas updates on a couple of occasions, it has not otherwise caused any reported issues.

don_bryn
Surveyor

Yes, that is one of the shortcomings of this voting process:  Unlike a political vote, not every member of the community is aware of a specific topic nor when the deadline for voting is.   In other words, we can have a whole bunch of people wanting the same thing but they don't easily find each other.  One would have to be a good online marketer/politician to really get all those people together to push for an idea.  It seems that eventually on the 5th to 7th reincarnation of an idea it will gain enough visibility to hit Canvas development radar.    Just now there are multiple ideas open for voting that are related, and might not look important due to the number of votes under each idea.    However, if they could all get together it would be much more obvious how important the feature is.

diane_michaud
Surveyor

It would be nice to be able to turn this option on or off, no?

dunnr
Surveyor

This email is no longer monitored as CCSD is moving to google. Rico Dunn can be reached at dunnr@nv.ccsd.net. Please update my contact information.

scottdennis
Community Team
Community Team

Duly noted...  Smiley Wink