Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
megan_walters
New Member

Things won't show up in app

I have a table on my landing page for each unit that gives details about what we're doing on a daily basis. Unfortunately, part of the last column gets cut off when students are using their phone app to access the page! Is there something I can do with my table formatting to ensure that the table is shown in its entirety?

6 Replies
awilliams
Instructure
Instructure

Designing with tables is controversial. There are accessibility concerns as well as mobile responsiveness. You've encountered the latter. You can try some things like setting the table width to 100% to mitigate the mobile responsiveness issues. If time permits, you may give some thought to doing away with tables except for presentation of data that lends itself to tabular presentation. I sympathize though, because tables are the most user-friendly way to layout content on a page using the Rich Content Editor and staying away from HTML. There are some resources here in the community such as Home Sweet Homepages without Tables‌ that might get you started thinking about how else it could be done.

rseilham
Community Coach
Community Coach

 @megan_walters ‌: I agree with awilliams‌ that the least problematic way to solve this issue is the avoid using tables for layout and stick to only tabular data. With that, getting your course up and running for you and your students is key. Is it possible you can post a screenshot of the issue? There is a CSS trick to get your tables to scroll left to right, but if you aren't comfortable with the HTML editor then I'd go back to the original suggestion of adjusting the tables or removing them.  Below is an example of how we do our homepage navigation that works well on mobile and web. 

215915_Screen Shot 2017-02-07 at 10.20.22 AM.png

215916_IMG_1280.PNG

Shar
Community Champion

Hi  @megan_walters ‌,

Like the others, I encourage you to post a screenshot for what the table looks like on the phone for your students. From reading your description it seems that your data is tabular - day and details, so a table does make sense to keep the information ordered especially with a header row.

One trick that  @rseilham ‌ shared a while back on Mobile CSS is to wrap the table with a div section that can overflow. Then your users will have to know to scroll the table left-right to see the rest of the table. This process does require you to use the HTML editor:

<div style="overflow: auto;>

   <table>

      ...the rest of your table stuff...

   </table>

</div>

I regularly wrap my data tables so the overflow on the horizontal is scrollable especially for the mobile view. This overflow style also means my table does not have to get squished uncomfortably if I have specific widths for the columns set.

Good luck,
Cheers - Shar

KristinL
Community Team
Community Team

Hi  @megan_walters  ~ It's been about six weeks since we last heard from you. Did the responses from awilliams  @rseilham , and ishar-uw help you resolve your issue? For now, I will mark this question as "Assumed Answered"; that will not prevent you or others from responding. If there is a workable solution posted here, please mark that answer as "Correct"--and if you arrived at a different solution, please take a moment to update the thread. Thanks!

rseilham
Community Coach
Community Coach

 @megan_walters ‌: I haven't tested this yet, but from what I've heard, the latest version of the Canvas app 3.18.1 has solved some of the issues with tables. Give it a shot and let us know if this works!