Is there any way to add nested lists in Rich Text field

Design help General
1

I am trying to add nested lists in Rich Text field in while making collection template but webflow is not supporting list inside a list. Is there any other way to handle this.
Thanks

2

Theres no way to currently do this within the rich text. What you can do is fake it by using a header like h6 for the main list item and a list underneath for your sublist. You can also play around with ordered and unordered lists as they don’t share the same styles and potentially indent one longer than another.

3

That’s what I’m talking about when I say Webflow is very limited when it comes to blogging.

To Webflow — If you wan’t to compete with WordPress (and you should) why don’t you just developed it to a reasonable level so we can all do basic stuff like nested list!

It’s really annoying that you can’t do nested lists in Rich Text.

4

@Arek_Dvornechuck
You can always use HTML in the custom code block you can insert into a RTE.

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ul>
    </li>
</ul>
5

Everything is custom code. All basic functionality is missing — if I knew I would never transfer from WordPress.

Why do I need Webflow if I have to use custom code for everything? How am I going to add custom code to 80 blog posts and for each H2 or listicle? — that’s crazy.

6

Also looking for a way to have nested lists in collections. Are there any new tricks to do this or is the only way to add an HTML block?

7

can use the “em” in the list item if not needed; create a sub list item

//CREATE SUB ITEM

$(‘.rich_text_class ul li > em’).each(function () {
$(this).parent().addClass(‘nested-list-item’);
});

8

Is this ultra basic feature STILL not possible? I could care less about nifty animations when everyday basics I need to use for clients is not possible. Anyone? Anyone?

9

Apparently so. I agree that it should be supported as it is a basic HTML ELEMENT. There is a wishlist item for this. Nested lists in rich text | Webflow Wishlist

It has been reviewed but not planned.

10

Extremely annoying! This was my solution:

  1. Select the list item in question
  2. Go to “Custom < li > attributes” on the right panel
  3. Make a new value like “indent=true”
  4. Go to page CSS and create this rule:
<style>
   li[indent="true"] {
	list-style-type: circle;
	margin-left: 24px;
   }
</style>
12

Hey Ian, I’m guessing that works in a standalone List Element, where you can apply attributes to individual LI’s. Have you found a way to do that inside of a Rich Text Element?

13

This problem has annoyed me for some time so I decided to prototype a jQuery solution that transforms a 1-level list into a nested list.

The approach I took is to use the Webflow designer’s in-built lists as fully as possible, and add some simple markup at the start of each LI line. That then gets processed into to a proper nested list. This way, nesting can be applied easily in both the Designer and the Editor, without the need for an HTML Embed.

For example, this-

image

Becomes this-

image

I think I’ve solved all of the challenges but before I formalize it as part of the Webflow Utils lib, I’m looking for some feedback and testers.

Full demo and notes site is here- PM me if you’re keen to help review and test it. That will also help me refine the integration & styling docs.

https://nested-lists-richtext.webflow.io/demo-2

UPDATE: This feature was completed and added to Sygnal Attributes.

14

try this:

15

@memetican THANK YOU FOR THIS. Much better solution than what I have built. Just FYI your styling doesn’t stay intact if the “>” are also styled. Just may be worth noting as it took me a couple of attempts to figure it out.

16

Ah interesting point, that would create a style element within a style element. I’ll add that note to the docs, thanks for that.

If you have a demonstration of this, please share it to the SA discourse group, I’d like to look into the case where you’re seeing it. I think using CSS !important on those special styles might resolve this.

17

Is it so hard to have a normal Text Editor? This feature is probably the worst part of Webflow, and maybe web in general. :frowning:

18

Nesting would be nice as a native feature, but the thing you have to remember for Webflow’s target audience is that every capability they provide MUST offer full styling abilities. That means the ability to style every level of the list, switch between ordered and unordered lists, and so on.

These styling options add a lot of designer-weight and complexity, along with docs and support requirements.

19

This update made my whole month. Thank you!

20

Webflow’s new nested lists feature?
Yeah I’m loving it, it rocks.

Try code blocks too if you haven’t. I don’t know how I survived so long building blogs and courses on Webflow without these


21

Is this only possible for unordered nested lists? I am trying to create a multi-level numbered list, but it is not working.
I need a multi-level numbered list, not a combination of numbered and unordered lists. My client is referring to content in a specific level, and we can’t do that with an unordered list.

Does anyone have any recommendations?