Found this content helpful? Log in or sign up to leave a like!

Rich Content Editor: Formatters Applied Over Block Containing List Should Apply Across List Instead of Items Only

Jump to solution
owk
Community Explorer

Currently, applying formatters to a block that contains list items typically applies the formatting to the content of each individual list item instead of surrounding the entire block with that formatter. This means that the "number" part of a numbered list and the "bullet" part of a bulleted list don't receive the formatting. The only way to get the formatting to apply to the numbering/bulleting is to edit the HTML directly, by adding the tags around the block instead of around each list item.

Here's an example - suppose this is my content:

owk_2-1763450206114.png

The HTML looks like this:

<p>Test items:</p>
<ul>
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
</ul>
<p>More items:</p>
<ol style="list-style-type: decimal;">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

If I highlight all the content in this box (e.g. by hitting ctrl+a) and change the font size, the current behavior applies the font size change to list items but not their bullets/numbers:

owk_1-1763450185955.png

The HTML looks like this:

<p><span style="font-size: 24pt;">Test items:</span></p>
<ul>
    <li><span style="font-size: 24pt;">Bullet 1</span></li>
    <li><span style="font-size: 24pt;">Bullet 2</span></li>
    <li><span style="font-size: 24pt;">Bullet 3</span></li>
</ul>
<p><span style="font-size: 24pt;">More items:</span></p>
<ol style="list-style-type: decimal;">
    <li><span style="font-size: 24pt;">First item</span></li>
    <li><span style="font-size: 24pt;">Second item</span></li>
    <li><span style="font-size: 24pt;">Third item</span></li>
</ol>

My desired behavior would be for the change to apply to everything in the block, e.g. like this:

owk_3-1763450495445.png

I could achieve this using HTML by adding the style argument to the overall list tags, though I'm not sure if there is a better way to do this (surrounding the entire block with a span doesn't work and gets stripped):

<p><span style="font-size: 24pt;">Test items:</span></p>
<ul style="font-size: 24pt;">
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
</ul>
<p><span style="font-size: 24pt;">More items:</span></p>
<ol style="list-style-type: decimal; font-size: 24pt;">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

 

Another example is blockquotes, whose behavior looks like this currently:

owk_5-1763450649776.png

The HTML looks like this:

<blockquote>
    <p>Test items:</p>
    <ul>
        <li>Bullet 1</li>
        <li>Bullet 2</li>
        <li>Bullet 3</li>
    </ul>
    <p>More items:</p>
</blockquote>
<ol style="list-style-type: decimal;">
    <li>
        <blockquote>First item</blockquote>
    </li>
    <li>
        <blockquote>Second item</blockquote>
    </li>
    <li>
        <blockquote>Third item</blockquote>
    </li>
</ol>

The behavior between bulleted and numbered lists doesn't match; my desired output would be as the bulleted list is doing now, only across the entire block:

owk_6-1763450790323.png

 

With this HTML:

<blockquote>
    <p>Test items:</p>
    <ul>
        <li>Bullet 1</li>
        <li>Bullet 2</li>
        <li>Bullet 3</li>
    </ul>
    <p>More items:</p>
    <ol style="list-style-type: decimal;">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>
</blockquote>

 

Labels (1)
1 Solution
chriscas
Community Coach
Community Coach

Hi @owk,

I can at least say that I can replicate what you have observed and documented here.  As this is pretty deep level, I can't find any documentation to state whether this behavior is intended or perhaps a bug with the Rich Content Editor.  I would recommend that you contact Canvas support and report this to them.  They'd be able to better understand if this is a bug and also get it properly added to a fix queue.  The community here is great for answering questions and confirming behavior, but as it's primarily comprised of Canvas users, it's not generally a place to report bugs/issues and get them fixed.

I hope this info helps!

-Chris

View solution in original post