[ARCHIVED] HTML coding not showing up in the app

[RachelWinters]

I have been trying to use the coding feature on canvas to create tabs, drop down buttons, etc. But I have been having an issue with these not showing up in the app, though they still show up for students in a browser. Is there a way to ensure that coding will show up in the app as well? Or should I just forget that aspect of canvas and just do the basic stuff? My students will all be getting iPads this coming year, so I'm assuming they'll all be using the app instead of a browser. Thanks!

[Chris_Hofer]

Hello there, @RachelWinters ...

I know that there are certain HTML code snippets that work on a desktop computer, but they will not display in the same manner on a mobile device.  Instead, they will display as plain text.  (There are also some that will partially work on a mobile device, but they might not display exactly the same as you would see them on a desktop PC.)  Here are some of the ones I'm aware of which I confirmed again this morning that, in my opinion, don't work well on mobile:

Alerts

<div class="alert"><strong>Alert:</strong> Sample alert style.</div>
<div class="alert alert-error"><strong>Error:</strong> Sample alert error style.</div>
<div class="alert alert-success"><strong>Success:</strong> Sample alert success style.</div>
<div class="alert alert-info"><strong>Information:</strong> Sample alert info style.</div>

Borders

<div class="content-box pad-box-mini border border-trbl">
   <p>some content here</p>
</div>

    and

<div class="content-box pad-box-mini border border-trbl border-round">
   <p>some content here</p>
</div>

Pills

<ul class="pill">
   <li>30% of total</li>
   <li>2 Rules</li>
   <li>10pts</li>
</ul>

Pop-Up Dialog

<div id="dialog_for_link1" class="enhanceable_content dialog">Bacon ipsum dolor amet pancetta cow...</div>
<p><a id="link1" class="Button Button" style="width: 20%;" title="This is the button description when you roll your mouse over it." href="#dialog_for_link1">Click to Learn More</a></p>

Table (Row Hover)

<table class="ic-Table ic-Table--hover-row">
   <thead>
      <tr>
         <th>Name</th>
         <th>Email address</th>
         <th>City</th>
         <th>State</th>
     </tr>
   </thead>
   <tbody>
      <tr>
         <td><a href="#">Ella Mentry</a></td>
         <td>ella.mentry@gmail.com</td>
         <td>Las Vegas</td>
         <td>Nevada</td>
      </tr>
      <tr>
         <td><a href="#">Joe King</a></td>
         <td>joe.king@gmail.com</td>
         <td>Houston</td>
         <td>Texas</td>
      </tr>
   </tbody>
</table>

Tabs

<div class="enhanceable_content tabs">
   <ul>
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

Tabs (Color)

<div class="enhanceable_content tabs">
   <ul>
      <li style="background-color: #acf53d;"><a href="#fragment-1">Tab One</a></li>
      <li style="background-color: #c0f56e;"><a href="#fragment-2">Tab Two</a></li>
      <li style="background-color: #8eeb00;"><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

    and

<div class="enhanceable_content tabs">
   <ul style="background-color: #dcfa70;">
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

I know this might be more than you were asking for, but I thought I'd provide some of the examples I'm aware of for you and others here.

Sing out if you have any questions about this...thanks!

[HeatherRuttkof]

Hello,

Thank you for posting this message. I am new to Canvas and just started using the templates.  I am not able to answer your question(my apologies), but I am interested in learning if you have been successful using code to create the functions you are describing.  Specifically, I am trying to organize buttons within a template.  Do you have any advice?  

[rseilham · Accepted solution]

@RachelWinters, 

The Canvas Mobile apps do support styling but requires its own mobile CSS uploaded through the Canvas admin, which is explained here:

https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

I will caution that the CSS you use for the web can't be added directly. You will need to do some work to get more complicated styles to work in the Canvas Mobile app. 

[zeeuw_de_s]

Oh yes. more please!!!! Or a url for more nice looking solutions like this.
Maybe an image with enhanceable_content dialog?