AnsweredAssumed Answered

Why Does Canvas Choke on CSS Positioning?

Question asked by Richard Niolon on Sep 3, 2017
Latest reply on Nov 6, 2017 by Richard Niolon

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

 

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

Outcomes