Like what we’re doing? Star us on GitHub!

RichText field not handling proper list-styles?

TheDunco
last week
17

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 3

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

image.png
  • jmikrut
    Payload Team
    last week

    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

  • TheDunco
    last week

    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



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

    image.png
  • jmikrut
    Payload Team
    last week

    this is just straight CSS



    https://www.w3schools.com/cssref/pr_list-style-type.php


    you'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

  • TheDunco
    last week

    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-disc
  • jmikrut
    Payload Team
    last week

    being not familiar with tailwind, this looks like hieroglyphics for me, but i'm happy that you resolved it!



    😏

  • TheDunco
    last week

    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

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More