cancel
Showing results for 
Search instead for 
Did you mean: 
aaron_bannasch
Community Participant

Do you use the tables class in the Canvas styleguide, does it work for you?

Jump to solution

I've submitted this as a help ticket to report is as a possible bug, but if anyone else is able to confirm that tables display this way as well I would appreciate it! I've tested it both on my organization's hosted Canvas instance and on https://resources.instructure.com/ 

For anyone who is unfamiliar with the Canvas styleguide, I recommend requesting an invite to Canvas Hacks https://community.canvaslms.com/thread/2140 or or putting /styleguide after your Canvas URL; for example: https://YOURCANVAS.instructure.com/styleguide

If you make a content page and copy the code from your styleguide, see if the tables in your content page have the same amount of vertical padding as the tables in your styleguide. Below is an animated GIF screenshot showing how tables on my content page do not match the styleguide (not enough vertical space between table rows in the default ic-Table class, even ic-Table--condensed appears to have more space).

sbyug7fr9k679uvpgl03h519oqhynorp.gif

Also, I do realize that many styleguide items do not work in the Rich Text Editor as noted in other styleguide documents on the Community, such as here Using the Canvas Styleguide: Icons, but I seem to remember this one working... hmm.

1 Solution

Accepted Solutions
aaron_bannasch
Community Participant

stefaniesanders Sorry for the late reply.

Canvas support was very helpful, I was informed that "Currently the Canvas Style guides are primarily for development use only and are not guaranteed to work with user generated content."

I hope that info is useful!

View solution in original post

8 Replies
Stefanie
Community Team
Community Team

 @aaron_bannasch ​, I've shared your question with the Instructional Designers​ group to enhance its visibility.

Stefanie
Community Team
Community Team

 @aaron_bannasch , have you had a response on your support ticket? If so, could you take a moment to circle back here and let us know what they've determined?

travis_thurston
Community Champion

 @aaron_bannasch ​,

Thanks for your question. We use the styleguide quite a bit as we design courses. I tried testing the tables as you described and I found that the padding was off in our instance as well. I haven't noticed that issue specifically before, but I did find that in 'edit mode' the padding appeared as it should, but after saving the page it no longer worked (see screenshots below). I tried doing a few things to change and fix it, but as it is coming straight from the styleguide I wouldn't think there should be an issue like this.

Screen Shot 2016-01-29 at 5.19.27 PM.pngScreen Shot 2016-01-29 at 5.19.47 PM.png

I'm not sure what to make of this. I'm wondering what you heard back about this issue from your support ticket. Let me know. Thanks.

Stefanie
Community Team
Community Team

 @aaron_bannasch , what did Canvas Support tell you about this?

Stefanie
Community Team
Community Team

 @aaron_bannasch , since we haven't heard back from you, we're hopeful that Canvas Support provided a satisfactory resolution. For now, we're moving this question into "Assumed Answered" status. If you have a moment, please let us know the results of your support ticket.

harris60
Community Contributor

It appears that the CSS style sheet has the padding for all <td> elements set to 2px. That overrides any padding set at the table level. It is a real pain, but if you desire you can force padding by setting it for every td like this:

<td style="padding: 10px 0px 10px 0px">

that means 10 pixels at top, 0 to the right, 10 to the bottom and 0 to the left.

I know this doesn't solve your problem, but it is a workaround.

Michael

P.S. I've been playing around with the bootstrap classes and they seem to work pretty much the same as the canvas ones from the style guide. However, if you use <table class="table"> instead of <table class=ic-Table> then it gives a nice shading effect to the table header <th>

aaron_bannasch
Community Participant

stefaniesanders Sorry for the late reply.

Canvas support was very helpful, I was informed that "Currently the Canvas Style guides are primarily for development use only and are not guaranteed to work with user generated content."

I hope that info is useful!

View solution in original post

aaron_bannasch
Community Participant

Thank you, Michael! I will try out adding the <td> style padding.