Multi-level numbered lists

Jump to solution
cchapman
Community Participant

Hello!

I've been fighting with this for about an hour using the RCE and realized I could ask the question here!! I need to create a multi-level list. When I paste my content into the editor, it only lists numbers in each of the levels. There is a screenshot below. Thanks in advance for any assistance!

I would like to achieve this:

  1. level 1
    1. level 2
    2. level 2
      1. level 3
      2. level 3

This is what I see...

Screenshot of my list

1 Solution
James
Community Champion

 @cchapman ​,

There are possibly two issues going on here, including one that you are probably not aware of.

The Rich Content Editor (RCE) improperly nests lists. The specification states that the sub-list belongs to the item above it. That is the second <ol> ... </ol> is within a <li> ... </li> on the parent list. Most people don't notice this unless you mix <ol> and <ul>.

The second is the one that you asked about. To get those, you need to specify the list-style-type. The list of allowed tags in Canvas' RCE says that the type is allowed for the <ol> tag, but it was deprecated in HTML 4 and reintroduced in HTML 5. However, there is a note that unless the value matters like legal or technical documents where you refer to items by their number, you should use the list-style-type instead.

Here's what it would look like (the style type is optional on the first one since it defaults to decimal).

<ol style="list-style-type: decimal;">

  <li>level 1

    <ol style="list-style-type: lower-alpha;">

      <li>level 2</li>

      <li>level 2

        <ol style="list-style-type: lower-roman;">

          <li>level 3</li>

          <li>level 3</li>

        </ol>

      </li>

    </ol>

  </li>

</ol>

Here's a nifty trick. I just copy/pasted what you were looking for from your message into the Rich Content Editor and it came out correctly. I didn't even have to retype it. I did pull it into Dreamweaver to apply some indentation for clarity of my first point, but this was a lot easier than I thought it was going to be. I couldn't do that with what you are seeing since that's an image, but you should be able to go through and 1) fix the nesting and 2) add the list-style-type into the style attribute.

View solution in original post