cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How to make columns on a Canvas page

without administrative access, is there any way to make columns on a canvas page?

9 Replies
Highlighted
Surveyor

Hi kritzerjb@unk.edu‌ - you could create a table with one row and three columns, but if that's not what you are looking for you will need to add some custom html to the page. Canvas runs on Bootstrap, so you will need to take that into account when adding code to your pages.

Do you have anything to add kenneth.larsen@usu.edu‌?

Hope that helps.

Erin

Highlighted

Hello Erin,

As a novice to the Canvas platform I'm trying to develop a hybrid (blended L/g) course. I understand that the table facility in Canvas is not without its problems - editing and viewing, therefore, I would like to avoid using it to produce the following format for a 36 week topic schedule:

282786_pastedImage_3.png  

The table in the above screenshot which was produced in Google docs and imported into a page is not ideal in that I cant readily hyperlink a topic to a module in Canvas i.e. I have to produce the hyperlink in Google docs and then import to Canvas. The latter does have the advantage of producing a dynamic document, however, I wondered if there is a less cumbersome way of achieving a document with  hyperlinking functionality, without using a Canvas table. I would be most grateful for any expert advice and guidance.

Rick

Highlighted

To make true columns where text can float between columns you will need the stylesheet "column", but this stylesheet is not allowed in Canvas today.

A workaround without floating between columns is to use a table, or as I prefere to use this in the HTML editor in Canvas:

<div style="width: 30%; display: inline-block; vertical-align: top; padding:2px;">XXX</div>

Explanation:

  • XXX = Your content
  • <div>XXXXXX</div> Creates a division/part of a page
  • style="      " Adds a stylesheet to the HTML-tag
  • width:30%; Set the width of the division. 33% may be more accurat if you whant to have 3 columns, but if you use padding it is added. That is why I use 30%...
  • display: inline-block;   Puts the divisions beside each other if the browser window is wide (as on a computer) and under each other on eg mobiles
  • vertical-align: top;   Text starts on top of column
  • padding:2px;   Adds a empty space (2px) around content in the cloumn
Highlighted

birger.eriksson@mdh.se, that's a great workaround.  I tried it just now with a bulleted list and it worked okay.  

Highlighted

birger.eriksson@mdh.se, I have been successful in creating columns with this approach, but I am not finding that they are responsive to screen size.

When I minimize my desktop window, I end up with a horizontal scroll bar rather than the expected behavior where the columns would drop below each other.

In the Canvas app, they are squished together with one to three words per column.

Have I missed something?

Edited to add: it works with two columns, but not with three.

~Pamela

Highlighted

You can try to add box-sizing to your style. It tells the browser how to handel  borders and padding.

eg: <div style=”box-sizing: border-box; width:  (and so on)

Highlighted

birger.eriksson@mdh.se

Where would the <div style="width: 30%; display: inline-block; vertical-align: top; padding:2px;">XXX</div> be added in the existing html string below - which is the starting of my table. I currently do not have any code that has the <div style text.

<table style="width: 100%; border-collapse: collapse;" cellpadding="5">
<tbody>
<tr>
<td style="width: 33.3333%;">

Highlighted

I would use <div> instead of <table>. Do not add the div to the existing table, replace the table.

Highlighted

Very helpful!  How would I add images/icons? I'd like to make the "content" pages more like web pages. Suggestions appreciated.