Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
rniolon
Community Member

Why Does Canvas Choke on CSS Positioning?

Jump to solution

Hi All

I ran into an odd Canvas thing, and I don't know if it is a glitch, or if everyone knows you can't/shouldn't do this except me Smiley Happy

So here is what I did...

1) I inserted a background image (a cog with smaller cogs in it) on my course homepage. It's a small file but large image with lots of white space.

2) I inserted a div like this - <div style="position: absolute !important; top: 50px;"></div>

3) I put my welcome message and links to some things and such inside the div.

Result: The image shows as a background for the page, and my div of information is exactly where I want it - over the picture and 50px underneath the line that says Home Page. Good...

Since that worked, I tried this again on another course home page.

1) I inserted a background image (a tree) on my course homepage. It's a small image, and so I used style="position: fixed; top: 160px; left: 500px; z-index: -10;"  to move it over to the right side of the page and keep it under my context.

2) I inserted a div just like before.

3) I put my welcome message and such inside the div just like before.

Result:The image is where I want it... but my div of information is displayed in a box that is 90px tall with a scrollbar. There is no css code that can change the height of the div box. (Hours later I discovered that you can stuff a dozen <p> </p> at the bottom of the page, after the closing div tag, and force the page and div to expand. No one will ever say my coding is pretty. Anyway...)

After considerable cursing, what I realized is that this worked the first time because the large image in effect made the body of the page also large, and so my div of information had plenty of already-provided room to spread out.

This did not work the second time because the small picture in effect made the body of the page small, and the div could not spread out and so was shrunk to this height. Why 90px? I have no idea, because the image itself is 300px tall, and extends below the bottom of the shrunk div. Moving the image down the page makes no difference, adding a second image 2000px down the page makes no difference.

The only thing I could do is change my information div to this - <div style="margin-top: -50px;"></div> - and ba-da-book-ba-da-boom the div expands to be as large as it needs to be in order to show the content, and it is roughly where I want it to be and is on top of the picture.

As an aside, using background-image: url("");  on my div of information is just borked. Canvas will strip it out no matter how you format it. You can skip the quotes inside the parentheses altogether, and use background-image: url(http://someurl.com); and canvas will reparse this for you to background-image: url(http://someurl.com;   That is, canvas insists on stripping the closing parenthesis. The image will show  in Firefox, IE, and Chrome, but not on Safari for the ipad (I have never found Safari to be very forgiving of this kind of error).

As another aside, opacity and filter are also stripped out by canvas.

So... my questions...

1) Is positioning known to break canvas pages?

2) Has someone found a better way to do this? I would never have thought just adding a picture to the background of my course home page would be such a pain...

Thanks for any ideas....

Richard

1 Solution
tdw
Instructure
Instructure

Hi  @rniolon ‌,

Without actually seeing the code that you're using and how it's rendering it's going to be difficult to troubleshoot your issue(s).  To answer your questions briefly:

1) No, not that I'm aware of (but I don't have any special knowledge)

2) In my opinion, a better way would be to just use an image followed by a paragraph, and not sweat trying to make it a background image.  Some things to consider are that most users will likely be accessing from a different device, browser, and resolution than you are developing in.  So while you might be able to figure it out for you, it'll probably cause other issues on tablets, phones, other browsers, and smaller or larger monitors or resolutions.  Something to consider.

My suggestion to you, as you're describing two (it sounds like) wildly different approaches to positioning within a page, is to truly sandbox them and test them until they're functioning as expected - making sure that your code works standalone.  What I mean is, create an html file on your device and code it with what you want and test it to ensure it looks proper.  Then try adding it to Canvas and see what changes. At that point, it's not likely an issue of Canvas "breaking" anything, but rather that some CSS properties have been set in Canvas which are different than the browser defaults. For example, your browser may have a div's "display" set to "block" by default, and so when testing in isolation, while you haven't set anything specific for your "div"s it will display as "block".  However (again, this is an example, I haven't checked) Canvas may have a style rule that sets divs inside of a content area to "display" as "inline-block" or "flex" and depending on your CSS and your HTML semantics, it could change the way your code is rendered.  At that point, it's simply a matter of setting the other CSS properties which have changed from your sandbox.

Hope that helps!

View solution in original post

6 Replies
tdw
Instructure
Instructure

Hi  @rniolon ‌,

Without actually seeing the code that you're using and how it's rendering it's going to be difficult to troubleshoot your issue(s).  To answer your questions briefly:

1) No, not that I'm aware of (but I don't have any special knowledge)

2) In my opinion, a better way would be to just use an image followed by a paragraph, and not sweat trying to make it a background image.  Some things to consider are that most users will likely be accessing from a different device, browser, and resolution than you are developing in.  So while you might be able to figure it out for you, it'll probably cause other issues on tablets, phones, other browsers, and smaller or larger monitors or resolutions.  Something to consider.

My suggestion to you, as you're describing two (it sounds like) wildly different approaches to positioning within a page, is to truly sandbox them and test them until they're functioning as expected - making sure that your code works standalone.  What I mean is, create an html file on your device and code it with what you want and test it to ensure it looks proper.  Then try adding it to Canvas and see what changes. At that point, it's not likely an issue of Canvas "breaking" anything, but rather that some CSS properties have been set in Canvas which are different than the browser defaults. For example, your browser may have a div's "display" set to "block" by default, and so when testing in isolation, while you haven't set anything specific for your "div"s it will display as "block".  However (again, this is an example, I haven't checked) Canvas may have a style rule that sets divs inside of a content area to "display" as "inline-block" or "flex" and depending on your CSS and your HTML semantics, it could change the way your code is rendered.  At that point, it's simply a matter of setting the other CSS properties which have changed from your sandbox.

Hope that helps!

rniolon
Community Member

Hi

Thanks Danny - after reading this, I did try adding display:block !important; to all the div styles, but it didn't change things... I will dig into my browser and see if I can find a setting that maybe affects this...

I do try to code and test in a local page first, then add to canvas and test with different browsers and devices/screen sizes as much as I can. However, in this case... I used the tabbed interface (https://community.canvaslms.com/groups/designers/blog/2015/07/01/using-jquery-without-custom-javascr... ) to display information, and so it looks odd in a local page as I don't think I'm calling the jquery functions correctly from the local page... but nothing displays in a 90px tall box, so I was stumped. Taking out the div classed for the tabbed interface and just showing the content made no difference either.
Rich

0 Kudos
langlangcat
Community Contributor

Haha, exactly the same experience here, I admire you putting so much patience to type it out.

By the way, for safari glitches, try the method in the link below, it may help. I have tried it on my Mac computer, it worked, don't know about iPad though. 

https://appletoolbox.com/2016/04/safari-images-not-showing/

0 Kudos
Chris_Hofer
Community Coach
Community Coach

Hello there,  @rniolon ...

I wanted to check in with you because I noticed that there hasn't been any new activity in this particular discussion topic since September 5, 2017.  It looks like you've received some help from both  @tdw  and  @langlangcat .  Did either of their responses help to answer your question?  Or, are you still looking for some assistance with your question?  If you feel that one of the above replies has helped to answer your question, please feel free to mark it as "Correct".  However, if you are still looking for some help with this question, please let the Canvas Community know by posting a message below.  For now, I'm going to mark your question as "Assumed Answered" because this discussion topic hasn't seen much activity in the past two months, but that won't prevent you or others from posting additional questions/comments below that are related to your topic.  I hope that's alright with you, Richard.  Looking forward to hearing back from you soon!

Hi Chris

Sorry - I had forgotten about this and didn't think about marking it correct - done  Smiley Happy

Thanks

Rich

sholmes370
New Member

Well, I know it's three years after this original post, but all is still not well in the Canvas CSS world. I'm using the new Rich Content editor, and the appearance of my code in the edit view is grossly different from what I see after I publish a page. One thing that would help would be for Canvas to publish, if not give access to, their global style sheet. As for positioning, I found it helps to wrap your entire page in a div tag, and position all your elements as children of that object. It's frustrating that the background-image attributes don't behave consistently, even then. (Again, applying a linear gradient to the background looks amazing in the editor, and completely disappears when you view the saved page... 

0 Kudos