Overflow Table Scroll

Often, we have a large table or long bullet/number list that we wish to use for instruction, but we want our Canvas page to be more compact. Below is a scrollable table that was created using HTML code.. This permits the instructor to place this long table in the middle of a page, yet not end up with an abnormally long page. This trick is fully screen-reader accessible. 

 

 

 

 

Your content continues after the table... a great effect if you have a long list of items, but don't want to make your readers scroll down an exceedingly tall website. After all, the further you make people scroll, the less likely they'll actually do it - and they'll miss important information as a consequence!

Just like the Announcements box, you can add content to the scrollable area by using the Rich Content Editor. so I put a long bulleted list in this example, and added some panda pictures.

This works essentially the same as the Announcements Box we learned about in the Beginning Users module, minus the colors and borders. The reason we included it in this module is that, because of its nature, we would tend to place this in the middle of a content page, create our table inside of it using the RCE, then add content to the table cells. The resulting code snippet can then become quite large and trickier to work with from the HTE side. Someone else in the Canvas Community added the code for an auto-expanding table inside the scroll box, and I hope they will add that to this classroom for us.

HTML Code Snippet

 

<div id="yourName" style="overflow-y: scroll; height: 175px; width: 50%;"><p>Your Content</p></div>

Anatomy of Code Snippet