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

Indenting discussion replies

Jump to solution

I've noticed that when a student replies to another student's discussion post, the reply appears directly under and aligned with the parent post. There's now way to easily tell which posts are replies to another student's comments. Is there a setting where I can have replies to discussion posts be indented to make them easier to quickly identify visually as replies?

1 Solution

Accepted Solutions
chofer
Community Coach
Community Coach

Hi  @anthony_ubelhor ​...

Thankfully, there is!  When you edit a Discussion topic, you should have an option below the Rich Content Editor (RCE) that says, "Allow threaded replies".  You want to make sure that this option is checked.  Here are a couple Canvas Guides that will be of help to you:

How do I create a Discussion as an instructor?

What is the difference between threaded and focused Discussions?

Hope this helps!!!

View solution in original post

24 Replies
chofer
Community Coach
Community Coach

Hi  @anthony_ubelhor ​...

Thankfully, there is!  When you edit a Discussion topic, you should have an option below the Rich Content Editor (RCE) that says, "Allow threaded replies".  You want to make sure that this option is checked.  Here are a couple Canvas Guides that will be of help to you:

How do I create a Discussion as an instructor?

What is the difference between threaded and focused Discussions?

Hope this helps!!!

View solution in original post

Thank you. I do have that option checked. Canvas does group the replies together and places a break between each thread (see below). However, it doesn't indent them. The problem for me is that in board with a lot of posts, it's difficult to tell at a glance which are original comments on the discussion topic and which are replies to another student's post. Because all the posts are left aligned (and because the border around each post is so light), visually it's difficult to distinguish one from another.

canvas.JPG

 @anthony_ubelhor , that's not expected behavior in a threaded discussion. Please refer to this guide--How do I view and sort Discussion replies as an instructor? --and specifically, scroll down to View Threaded Discussion. The replies, and replies to replies, are clearly indented. I looked at one of my recent more active discussions, and the indents extend at least four levels.

Could it be that you enabled this setting after students started posting? Although I don't think it should matter, perhaps that's the reason you're not seeing indented replies. If not, I'd recommend submitting a help ticket to Canvas Support so that they can examine the specific settings on the discussions more closely.

Also,  @anthony_ubelhor ​, it just occurred to me that you might be interested in commenting on (and voting on!) this feature idea that is still open for voting:

Anthony,

I came in with exactly the same question. Now that I look closer, I see that the TEXT is indented, even though the containers and, most importantly, the borders of the containers are all aligned together. I am going to take a crack at fixing this in our custom css, but far better would be for Instructure to make the threading easier to see. Now that I know what I'm looking for, the threading works for me, but that doesn't solve the problem for every other user out there for whom the border makes the discussion appear flat. I'm guessing it's at least half the users out there.

Becky, were you able to accomplish this by editing any of the css? I was just considering tinkering but wanted to see if anyone had done it already.

I know I started in on it, but I must have gotten pulled away and then forgot all about it. Now that I know how to look for the indentation, the problem isn't glaring in my face every time I go to a discussion, but I know the issue is still pressing. If I come up with anything, I'll be sure to post it.

This turns out to be harder than most css customizations, because the white space in front of replies doesn't come from a stylesheet, it is inline styling. So, I ended up writing a javascript function to reduce the width of the white space, and add extra borders to indicate the level of each post. To see what it looks like, you can visit any discussion, and open up your browser console to call:

$.getScript("https://apps.ats.udel.edu/canvas/subaccount_ats_full.js");

That will load my new code into your browser for a one time use. You will have to reload it each time you visit a new discussion, but if you like it, feel free to download and modify the js page. BTW, most of the code is the waitForKeyElements function which I downloaded from GitHub. If you happen to already have that function running in your instance, use

$.getScript("https://apps.ats.udel.edu/canvas/subaccount_ats.js");

instead.

Please let me know if you have ideas about making this better. I'm not super happy about the way the look turned out, but moving the boxes turned out to be harder than I had imagined, whereas adding the extra borders is easy, and gets the job done, even if the aesthetics aren't great. I have installed this in a tiny sub-account in our instance. Hopefully with your input, it can be much nicer by the time I push it up to the full account.

I have to run now, but later today I'll hopefully get a chance to dig up some appropriate links for anyone who doesn't know how to use their browser console.

Oh. The code does one other thing, which is to add a Projecting button to the global menu. Idea being, click the button to get Canvas Chrome out of your way when screen real-estate is at a premium. i"d get rid of the global menu too, but then you'd lose the button you need to bring the Chrome back.

Ok, good news -- I think I've been able to resolve this issue with CSS alone. Give this a whirl (note that you can change the spacing/padding and colors, I was just trying to keep it as minimal as possible. I initially tried a slightly different approach, but I couldn't get the read/unread buttons to look quite right, hence the 'bars' look on this one. I'll post a screenshot of the other attempt as well, though. If anyone can get it looking better please share!

Here's the css I'm currently playing with (just add to your global stylesheet, and you're done!):

.replies {

padding-left: 7px;

border-left: solid #f2f2f2 16px;

}

.discussion-read-state-btn {

    top: 32px;

}

div.entry-content {

  padding-left:0px !important;

}

And here's the look with the code above:

Topic_ PEL Discussion-1.png

And here's a slightly different look that I actually prefer... if I could only get the read/unread buttons to look right:

Topic_ PEL Discussion-2.png