"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
RichText field not handling proper list-styles?
I would expect to see something along the lines of this or something of this nature where the symbols change per indent level...
No Indent Level
1. Indent Level 1
A. Indent Level 2
i. Indent Level 3Is this something I would be doing wrong? I'm not seeing this when I'm rendering it out on my frontend either, where I'm setting the list style property on the lists.
this is actually just a CSS thing that payload could do
but you'd have to do it on your frontend as well i believe
worth looking into it for sure
I am using a modified version of the serialization found in the documentation (and Tailwind for styling 🙏 ), and am applying this list style to the
<ol>s and
<ul>s so i'd assume that would do it but perhaps I'm wrong
@364124941832159242Is this something that Slate supports by default? Or do you know how do people normally handle this in their frontends? For now I plan on doing this with CSS and having it apply the styles to nested lists, but if there's a better way I'd love to know. I think Tailwind is overriding the default user agent styles in my case which is usually where these sorts of styles come from
this is just straight CSS
https://www.w3schools.com/cssref/pr_list-style-type.phpyou'd want to define a different list-style-type for each one of your nested li levels
this should / could also totally be done within payload, but it wouldn't help you on the frontend
as far as the output HTML is concerned, they're all just
li's - from there, it's up to you to style it
it's not a slate thing at all really
Yeah, I did figure out how to do this with Tailwind but I have other styles elsewhere that are overriding them so I'll have to sort that out
This is the sort of thing I had to do in Tailwind...
[&_ol_ol_ol]:list-[lower-roman] [&_ol_ol]:list-[lower-alpha] [&_ol]:list-decimal [&_ul_ul_ul]:list-[square] [&_ul_ul]:list-[circle] [&_ul]:list-discbeing not familiar with tailwind, this looks like hieroglyphics for me, but i'm happy that you resolved it!
😏
Hahaha, yeah this is the UGLIEST Tailwind I've ever written 🤣
It's because I'm using non-default selectors and non-default styles, and the syntax becomes messy when you break out of the standard utility classes
Star
Discord
online
Get dedicated engineering support directly from the Payload team.