cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
liuz21
Community Participant

The available space becomes wider for each page.

Jump to solution

We have noticed a change in Canvas pages: the available space is wider for each page which has influenced our course templates. Do you know why we get this change?
See the screenshots below:
  • In Beta, the pages look fine:
239379_pastedImage_2.png
  • In Production and in Test, the text doesn't align with the graphics well any more.
239381_pastedImage_4.png
Tags (4)
1 Solution

Accepted Solutions
James
Community Champion

The max-width was removed in beta for a while (it's back now) and I was excited. Then came the July 15 release and the removal didn't make it into production and I was bummed. It turns out that the removal only made it into production if you have the tutorials turned on. If you have the tutorials turned off, then the max-width is still there. erinhallmark‌ responded to the comments about the release with a clarification:

Thanks for your comments; I've updated the release notes for some clarification. The Dashboard course card width was originally to apply to all accounts because of the New User Tutorial feature being default in Canvas. However, our product team has since delayed that change, and so only institutions that have the New User Tutorial enabled as a feature option will see the responsiveness in the Dashboard and elsewhere. Those of you who do not have it enabled saw the Dashboard return to the fixed width in beta when that change was reverted, and now there is no change in production as well.

I haven't checked for a while, but when I removed the max-width, I had to be more specific in my selector.

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

I also had to make sure that it didn't get ran inside an iframe, although I don't remember the exact reason right now (probably SpeedGrader issues when the page is loaded in the iframe on the left).

It would be great if they fixed it to be just as simple as the .ic-Layout-wrapper. Well, more awesome would be removing it completely, not just for those who have enabled the tutorials.

View solution in original post

6 Replies
kona
Community Coach
Community Coach

 @liuz21 , I'm not sure of the answer to this question, but I'm going to share it with the https://community.canvaslms.com/groups/designers?sr=search&searchId=64dac9d7-8e3a-41e1-ad81-519104e8...‌ and https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=5cf323c7-9822-43f5-aa62-...‌ groups in the Community to see if they can help!

chofer
Community Coach
Community Coach

Hello  @liuz21 ‌...

It almost looks like your browser has zoomed out and is not set to 100% any more.  To correct this, on your PC you can hold down the Ctrl and then press either the "+" or the "-" key on your keyboard until 100% zoom is restored.

I hope that helps, Amy!

liuz21
Community Participant

Thanks for your reply, Chris. But that is not the reason. The browser was set 100% for both of the screenshots.

rhudy
Community Participant

 @liuz21 , can you share your code so we can better understand what's going on there? I don't know why you're seeing such a different view in Production vs. Beta, but somewhat in line with  @chofer 's question about browser settings, code is the first place I'd want to look because your students are likely coming to the page with all manner of settings/devices and we can probably make some adjustments that will ensure the page looks correct across all those environments (and looks correct in your production environment, as well). 

mwatson2
Community Participant

I'm glad I ran across your question today,  @liuz21 , because I went poking around in the CSS this afternoon to get my pages to expand to the full width of the browser window. I found that adding the attribute style="max-width: none;" to the DIV with class ic-Layout-wrapper did the trick. It seemed that I just needed to override the max-width: 1366px; that was hardcoded in the stock CSS. Easy fix.

Now, upon reading your question, I see that my beta instance does expand horizontally to the width of the window without any modification. However, to my surprise, both the production and the beta instance have max-width: 1366px; styling for that DIV, so it seems something funny is going on here--maybe an override happens later in another stylesheet, but it's too late here to investigate further right now. Tomorrow perhaps.

James
Community Champion

The max-width was removed in beta for a while (it's back now) and I was excited. Then came the July 15 release and the removal didn't make it into production and I was bummed. It turns out that the removal only made it into production if you have the tutorials turned on. If you have the tutorials turned off, then the max-width is still there. erinhallmark‌ responded to the comments about the release with a clarification:

Thanks for your comments; I've updated the release notes for some clarification. The Dashboard course card width was originally to apply to all accounts because of the New User Tutorial feature being default in Canvas. However, our product team has since delayed that change, and so only institutions that have the New User Tutorial enabled as a feature option will see the responsiveness in the Dashboard and elsewhere. Those of you who do not have it enabled saw the Dashboard return to the fixed width in beta when that change was reverted, and now there is no change in production as well.

I haven't checked for a while, but when I removed the max-width, I had to be more specific in my selector.

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

I also had to make sure that it didn't get ran inside an iframe, although I don't remember the exact reason right now (probably SpeedGrader issues when the page is loaded in the iframe on the left).

It would be great if they fixed it to be just as simple as the .ic-Layout-wrapper. Well, more awesome would be removing it completely, not just for those who have enabled the tutorials.

View solution in original post