[ARCHIVED] Tabbed navigation not correctly rendered in Canvas app on iOS products...

[lhenning]

Hello all;

The good news is I found the tabbed navigation code, implemented it in one of my courses, and thought it all looked great in both Windows as well as Mac environments in multiple browser programs!  I was so excited!  Then I tested it in the Canvas App on my iOS equipment- an iPad Mini and iPhone 6s.  Seems to me this is not the first time I have run into an incompatibility issue.

This html code is not rendered correctly by the app on this equipment.  The page appears in Canvas just as it does in the edit window; list of hyperlinks on top with content below.  When I click on the hyperlinks (hoping to see if I will be 'jumped' to that place in the page), I was brought back to my Canvas dashboard.

As I don't have access to Android products but know many of my students use them, will someone please let me know if this is an iOS thing?   I remember there being "iFrame" issues that had workarounds, is there a fix out there for this issue? I would be happy to add you to this course so you can test...

My thanks for your help,

Lindsay

[Stef_retired]

lhenning​, to complete the loop here: I answered this question in What is the html code for tab navigation within an assignment page?

[lhenning]

Hi Stephanie,

Thanks for your time and responses.  As I wrote, I did find and apply the code you indicated in your original reply to me. It works and looks great as long as you are not using the Canvas app.

My issue is now trying to find a fix for the issue- if one exists.  If it doesn't exist, then I wonder if anyone had submitted a request to the development team; do you know?

Thanks,

Lindsay

[Stef_retired]

lhenning, I don't know if anyone has submitted a request of this nature (I did a quick search and couldn't find one). To be honest, I don't even know if it's feasible given the architecture of the apps. That having been said, if you submit a request to Canvas Feature Ideas​ (after reading How do I create a new feature idea?​), and then post the link here to promote it, I'd certainly give it an upvote.

[lhenning]

Hi Stephanie,

Thanks for the support!  I just might remind you about your volunteerism... 🙂  BTW, my current workaround for the issue is an update to my syllabi areas where I talk about technical requirements for the class. 

Talk soon!

Lindsay

[cadatko]

Lindsay, I found this too when I started using tabs. Basically you just have a page with content. There are 2 things I do to work around this:

1. Use headings to organize the content within a tab -- usually giving the title of the content in the tab a <h3>. This helps to organize the content on the mobile apps.
2. Let users know that there is a difference between desktop & mobile view: Click on the tabs below (or scroll if using the mobile app) to view...

[lhenning]

Hi Katie,

Great minds think alike!  I had already implemented your suggestions after playing around a bit- wish I had checked my inbox earlier... 🙂  My message for how to navigate follows:

To navigate this window and find your assignments, please:

• Click on each of the tabs above (Introduction, Presentation, Additional Materials, CH1 Discussion) to see the materials and assignments for this unit.

(Hint: If you are using the Canvas app on your tablet or smartphone to view this page, you will need to scroll down to see all the content.)

---

I did add one more tweak.  At the end of each section, before the </div> code, I inserted <hr> to give me a horizontal rule.  Now when I test on my tablet, I see the headings as well as an <hr> that helps show an app user the end of the page.

Thanks for the help!

Lindsay

[cadatko]

That's so awesome!

[Robbie_Grant]

lhenning,

We are giving the Instructional Designers area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie