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
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.
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.
@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>
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.
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.
Extremely annoying! This was my solution:
- Select the list item in question
- Go to āCustom < li > attributesā on the right panel
- Make a new value like āindent=trueā
- 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-
Becomes this-
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.
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.
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ā¦