Adding Numbered list with Heading in Rich Text

Hi,

I’m adding an ordered list on my Rich Text Element.

  1. List 1
    Paragraph

  2. List 2
    Paragraph

  3. List 3
    Paragraph

I am adding the paragraph to the list by pressing Shift+Enter as suggested by @samliew in his post.

I am trying to make the “List 1,2,3” as Headings and “Paragraph 1,2,3” as Paragraphs but I don’t see an option to do this in the Rich Text Element.

Something like this:

  1. List 1 (H2)
    Paragraph ( p )

  2. List 2 (H2)
    Paragraph ( p )

  3. List 3 (H2)
    Paragraph ( p )

Does anyone know a solution to this?


One thing I know - when you share your read only link - You encourage more people to find a solution to your issue :slight_smile:

Here is how to share

I do that always, but its a simple question referring to a general element. Not something specific to my website. :slight_smile:

1 Like

Take advantage of the new feature in Rich text fields that allows you to embed HTML. #somecode required.

2 Likes

Yes, I guess there is no way around it. :slightly_smiling_face:

I also can’t seem to apply any classes to the HTML embed in Rich Text. I have some tables that need overflow scrolling in mobile. I guess they are still working on the completion of the new feature.

Thanks Mr. WebDev.

Nothing stops you from adding CSS to style tables as you see fit right in a style block in the embed. If you wanted to affect all instances you could do that on the template page or higher.

Hi WebDev, Thanks for the reply.

I am just trying to add a table with a horizontal scroll, so it can be scrolled on mobile and viewed as it is on desktop.

I have applied a class to the Rich Text Block, but I can’t seem make a new nested class for the Embed.

I usually apply “Overflow” to Auto, for HTML embeds to make this happen.

Can you explain a bit more about your idea?

I will help me a lot, because now I have multiple collections that need a table, and I have to make separate sections just to add table to them.

Edit: Found this code:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>