I've recently embedded a HTML file within a Canvas course, using an iframe, and when i try to use it on the mobile app, it opens it in a separate browser.
The HTML file is part of a tiled layout i have for a course homepage that uses a CSS style sheet to give the tiles shadows and also make tiles tint when a mouse is hovered over them. The links link to other pages in the Canvas course.
Can anyone suggested anything?
Where is the original HTML file hosted? Canvas will not allow content from any url that begins with http to be embedded in iframes. Any content that you would like to populate to an iframe should originate from an https based site.
Unfortunately, as you probably know, Canvas does limit what CSS you can implement into the content of a course, you'd could always use inline styles to create buttons similar to the ones that you are talking about, with one exception: you won't be able to add the hover effect as it is a pseudo-selector.
For example, you could do something like this to create a button in the Rich Content Editor:
<a href="#" style="float: left; margin: 30px 0px; -moz-border-radius: 5px; -ms-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 15px; background: #007aff; color: white; text-align: center; text-decoration: none; -moz-box-shadow: 0px 3px 5px #666666; -ms-box-shadow: 0px 3px 5px #666666; -webkit-box-shadow: 0px 3px 5px #666666; box-shadow: 0px 3px 5px #666666; width: 100px;">Button</a>
Which would create the following button, though it does appear that Canvas will remove the box-shadow and border-radius parameters from the inline styles. I think that I have been creating buttons with rounded corners.
The only other way to truly have any control over the CSS is to have admin access. That being said, you can also use distinct Canvas assets that are tied to distinct CSS classes. I would check out the Styleguides for more info on that.
The original HTML file is hosted in the files section of the Canvas course. I have been using the iframe so I could use CSS to its fullest potential.
Just seems a shame that the Canvas app doesn't see that I'm linking to another course page.
Thank you for the information Terry, now that I better understand the issue, I have a solution for you:
I tested this on my iPhone 7+ using the Canvas mobile app and was able to get it working. Let me know if you have questions or if you have issues.
I've tried what you said but it still opens in a separate window with the Canvas sidebar taking up most of the screen space.
If you have the time sometime this week or next, let's try and set up a Zoom conference, and I can see if I can help get this working for you. Direct Message me your details, and we can go from there!
Terry, I know that I tagged you in the solution that I posted for this, but if there are others who arrive at this specific discussion, I want to point them towards the answer. Just check out https://community.canvaslms.com/groups/designers/blog/2017/06/20/embedding-an-html-page-in-an-iframe....