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

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 Likes

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.

1 Like

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.

3 Likes

@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>

1 Like

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.

2 Likes

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?

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ā€™);
});

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?

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.

1 Like

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>

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?

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.

1 Like

try this:

@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.

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.

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:

1 Like

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.

This update made my whole month. Thank you!

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ā€¦