[ARCHIVED] Table Not Re-sizing in Mobile App

[msanders]

One of our teachers used the standard editing tools to put a table on her homepage.  When she views the homepage on the Canvas App (iOS) the right side of the table is cut off and the screen doesn't scroll.  This teacher thought it worked last year.  Does anyone have any recommendations on how to make the table fully visible in the app?

Thanks!

[rseilham]

 @msanders ​: Thanks for the post. Have you tried to sideways scroll the table itself? In my research, the table will look cut off, but you should be able to still scroll.

[msanders]

Hi Ryan.  I'm not sure what you mean by sideways scroll the table.  If I try to scroll the screen left/right, nothing happens.  I tried turning the phone sideways but the screen doesn't reorient.  

[rseilham]

Try to put your finger on the table itself and scroll left to right, and not the page itself.

[msanders]

That's fabulous!  But unfortunately, no matter where I tap/slide, the table still doesn't scroll.  How did you create your table?

[rseilham · Accepted solution]

 @msanders ​:

I know this gets technical, but in the Rich Content Editor, if you flip to HTML and put the following code around your table, it should make it work for iOS and Android:

<div style="overflow-x: auto;">

==TABLE CODE==

</div>

You shouldn't need this code for iOS, but you would for Android.

Hope this helps,

Ryan

[msanders]

Just a quick update...  Adding the <div> code around our table code did make our tables scroll in the Canvas iOS app (they didn't previously). The only oddity that we noticed was that the border around the table did not resize.  So the right side border ran through the middle of the table. Our teacher decided she could live with that -- she was just so happy that the table was scrolling again!  Thank you! 

[jacob1]

I having this same problem. I tried adding the suggested HTML code to my table and all it did was remove the padding from the cells. It was still un-scrollable in the ios canvas app. Does anyone have any other fixes?

[rseilham]

 @jacob1 ‌: I just verified this still works on our end. Can you copy and paste your overflow and table code here so I can have a look. 

Below is what works for me. One to thing to remember, so scroll right to left, you need to put your figure directly on the table. Thanks!

<div style="overflow-x: auto;">
<table style="width: 100%;" border="1" cellpadding="2">
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
<td>Location</td>
<td>Relationship</td>
<td>Username</td>
<td>Password</td>
</tr>
<tr>
<td>Jim</td>
<td>Johnson</td>
<td>34</td>
<td>Los Angeles, Ca</td>
<td>Father</td>
<td>jjohn</td>
<td>dole(dal;sd*</td>
</tr>
<tr>
<td>Jack</td>
<td>Ford</td>
<td>45</td>
<td>Orlando, FL</td>
<td>Father</td>
<td>jford</td>
<td>449**0dkld</td>
</tr>
</tbody>
</table>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[bkraus]

As of Canvas for iOS 3.18.1 which will be out very shortly, tables on iOS should work a little better, by automatically allowing you to scroll right<->left on the table. Let us know how it works when it rolls out!

[bkraus]

To follow up, 3.18.1 has now been released!