cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
pete1
Community Contributor

Android Canvas App page layout

Jump to solution

Hello Canvas community!
I have a two part question. Firstly, I believe there has been a somewhat recent (within two weeks??) change to the viewing of pages on android. Some of our picture hyperlinks are no longer shown as can be seen below. Note: This was tested on two separate android phones, both with up to date canvas app / software.

Desktop browser view:

img 1.jpg

Android App view:

Screenshot_1.png

In this picture the hyperlinked images still exist, however they are the definition of tiny.

Desktop browser view:

img 2.jpg

Android app view:

Screenshot_2.png

In this view, the hyperlinked images have disappeared.

This error is not replicated when using iOS.

The second part of my question is no doubt easy to answer. Although I have searched through the guides, I have not found my answer. The white box on the android images (also same issue with iOS) is a ThingLink image in a iframe. Is iframe currently not supported in the canvas app?
Thanks for your time everyone!

Tags (2)
1 Solution

Accepted Solutions
pete1
Community Contributor

I have had a bit more of a play around and just thought I would upload some screenshots just in case anyone was interested in this weeks progress in Australia..

Here is an image of my "test mobile page" with Chrome browser (slightly zoomed out)
mobile test.png

# 1 A direct embed in rich context editor of the two images A+ and conference
# 2 An embed of images and small amount of text in our "era" tables

# 3 Copy and pasted code with adjusted image from  @MattHanes  who I believe worked his magic from the canvas style guide (if anyone is curious, Matts comment is at the bottom of "columns without tables".
# 4 Copy and pasted code with adjusted image from  @G_Petruzella  and the lovely div table guide Columns Without Tables: code-snippet

So the important question, how this looks on mobile (android via canvas app)

This shows #1 and #2. You can see the direct embeds still show, however the table removed the images (excuse the iframe, I was fiddling with that)

1 and 2.png

This shows # 3 I think this works quite nicely with the mobile, you will be able to see the image in the next screenshot.

3.png

This shows # 4 . A bit squished, but still a reliable display of content which closer mimics that of the web browser view. The top pup belongs to #3 the bottom pup to #4

4.png

Just to put a bit of a disclaimer in here, I did not fiddle with any of this code to make it nicer for mobile, it was just a straight copy and paste.
Once again thanks for your assistance Janell!

View solution in original post

11 Replies
chofer
Community Coach
Community Coach

Hi there,  @pete1 ​...

I do not have answer for you.  However, I wanted to let you know that I have shared your question with the Canvas Mobile Users​ group here in the Canvas Community.  If you are not a part of that group yet, consider following them.  Hopefully, your question will get more visibility now that I've shared it with this group!

jamely
Community Champion

I can explain the "tiny" images problem, I saw it on a recent Canvas video about optimizing for mobile. If you used tables to design the yellow images and links, the tables are the problem. They do not "degrade nicely" into the app settings. You can use <div>s instead, to get a similar layout.

As to the grey box, it may be because the ThingLink image is not from an HTTPS (secure). Some browser settings on the desktop view will not allow non-secure content without changing your options to view it, and that may be the same with the mobile app.

I just checked, and my iframes of Google Docs and Sheets are still working in mobile, so iframes are not disabled for mobile.

Hope that helps a bit!

pete1
Community Contributor

Hi  @jamely ,

Thank you for your reply, we do use tables for everything, or else I personally find formatting to be a nightmare. So that definitely explains the tiny pictures, it does concern me slightly with the one page that completely had the images missing however (page set up follows the same format as the tiny image page)..

In regards to Thinglink, when gathering the iframe embed its strips the https, I snuck some serious computer coding in (..just added https..) and the image loaded on the mobile canvas app. Thank you very much for your help with that!

I will still need to try and look into the disappearing images, or else we just may not be able to hyperlink images.

jamely
Community Champion

As to not using tables,  @G_Petruzella ​'s write up on Columns Without Tables: code-snippet has been very helpful for me to remove tables that don't work well on the mobile apps. It digs deeper into html/css than adding an https though!

For the missing pictures, you mention " else we just may not be able to hyperlink images." That makes me wonder how you are adding images. Are the pictures in your Canvas Files? Or are you speaking about making images links? It might be helpful to post a code-snippet of the part you are having problems with, so the community can help you diagnose it.

Glad I could be of assistance;p

pete1
Community Contributor

We use tables for everything, so will definitely have to look into the <div> to start developing our pages, thank you for the link (and thank you Gerol).

Below I have attached a picture of the same page as noted above (becoming an allied health assistant). The yellow highlight identifies an external link to a video on wistia, the orange highlight identifies a link to a canvas quiz page. Both images are saved in the course files.
WTYI code.png

The thing that may be interesting to note, is the "table class = era_table". I am lead to believe this was created by an external source and finding out that information is slightly above my computer skill set.

jamely
Community Champion

Well... this might be helpful. I am pretty sure you don't need the "class" section of the "<table class="era_table"> and can just put <table> there. Below is a breakdown  of your posted image code, and what each part means, in case you didn't already know.

<table>     //makes your table

  <tr>       //make a row in your table

    <td style="text-align: left;">       //makes a cell in your table with the text aligned to the left (style is not necessary, td is table data)

      <a href="link to your video" target="_blank">     //link to whatever (video, page) target opens in a new tab

        <img src="this should be your button image in canvas"/>      //make a picture of a button that has your text on it, self-closing tag "/>"

      </a>     //closes the link

    </td>     //closes the cell in the table row

    <td>     //makes a new cell in the table

      <a href="link to canvas quiz page">      //link to whatever (video, page)

        <img src="link to your button image in canvas"/>    //make a picture of a button that has your text on it, self-closing tag "/>"

      </a>     //closes the link

    </td>     //closes the cell in the table row

  </tr>        //closes a row in your table

</table>    //closes your table

pete1
Community Contributor

Hi  @jamely Thank you for the break down of html. I have ended up working out what the tags represent with some assistance from google and some keyboard bashing.

The reason we use the "era_table" is because I believe it structures a table nicely for us. For example, the html coding goes as follows:
html editor.png

(please note this is just a rough copy and paste, I know there is wasted information in the coding) which in rich context editor looks something like:

era table.png

The table is great as it spaces out the two left rows dependent on the height of the image on the right.

Linking this back to the issue of images disappearing on Android and not iOS. I am not sure. And also this table format is used throughout our page designs, so why one page will show a decreased image size and the other removes the images completely I also do not know.

Thank you for your continuing advice and tips though Smiley Happy I appreciate the assistance.

jamely
Community Champion

Well, you have reached the limits of my ability;p The only other thing that I can think of, is to check if the image shows up on Android if you place it outside of the table. There is an off chance that the image is there, but showing up in a part of the cell that the cell isn't open over (like a window into a larger document). That might help to narrow it down some more. Or delete and re-embed the image, some times that works too.

Good Luck!

pete1
Community Contributor

I have had a bit more of a play around and just thought I would upload some screenshots just in case anyone was interested in this weeks progress in Australia..

Here is an image of my "test mobile page" with Chrome browser (slightly zoomed out)
mobile test.png

# 1 A direct embed in rich context editor of the two images A+ and conference
# 2 An embed of images and small amount of text in our "era" tables

# 3 Copy and pasted code with adjusted image from  @MattHanes  who I believe worked his magic from the canvas style guide (if anyone is curious, Matts comment is at the bottom of "columns without tables".
# 4 Copy and pasted code with adjusted image from  @G_Petruzella  and the lovely div table guide Columns Without Tables: code-snippet

So the important question, how this looks on mobile (android via canvas app)

This shows #1 and #2. You can see the direct embeds still show, however the table removed the images (excuse the iframe, I was fiddling with that)

1 and 2.png

This shows # 3 I think this works quite nicely with the mobile, you will be able to see the image in the next screenshot.

3.png

This shows # 4 . A bit squished, but still a reliable display of content which closer mimics that of the web browser view. The top pup belongs to #3 the bottom pup to #4

4.png

Just to put a bit of a disclaimer in here, I did not fiddle with any of this code to make it nicer for mobile, it was just a straight copy and paste.
Once again thanks for your assistance Janell!

View solution in original post