Bullet List inside of Numbered List appears buggy

  • (Given this issue affects a private draft, I can’t link to a live page. The general site though is . If this needs posted to another place, please advise! Feel a bit out of my depth here.).

    I have a formatted numbered list (not just me typing out 1., 2., etc.. It’s the actual CMS “number list”).

    I then wanted to have a bullet list within that number list (between points 3. and 4.) without interrupting the original flow. The way I tried to accomplish this was:

    1. A full enter (return) between 3) and 4), which adds another list item between them
    2. Hitting tab to indent that new item to form a new sub-list, which was pushed out of the above sequence
    3. Converting that to a bullet list, and adding the points in order

    On Google Docs it works perfectly: the ‘Level 1 number list’ maintains its numbering, and the indented ‘Level 2 bullet list’ sits outside of that sequence. Example of that here: https://i.gyazo.com/e04736eeeafc44792661e62343860287.png

    This also looks fine when in the text editor on our WordPress post: https://i.gyazo.com/d1fa8b565f9c496ea3cdca65e5d8b755.png

    However, when I click Preview and see the post as it would look on our website, it looks wrong. The indented Level 2 List is treated as part of the Level 1 Number sequence, and the numbers and bullets are also mushed together. Example here: https://i.gyazo.com/4037855b777ce9f1478d3941a9823398.png

    Does anyone know how to solve this, or what might be causing it? Is this a CSS issue?

    • This topic was modified 1 year, 12 months ago by James Huff. Reason: link moved to proper field

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • I’m unable to reproduce this at my end using the default WordPress block editor.

    In fact, in my test, tabbing did not work at all: I had to click the “Indent” button, but this added a bulleted list automatically (not a numbered list, so no need to convert as in your step 3)… and the numbering is correct.

    So it seems this is something peculiar to your environment.

    1) Are you using WordPress’ default editor? If not, which editor are you using to create these lists? Your screenshots are all cropped, so I’m unable to see the full screen to discern the editing environment from it.

    2) I know you said this is a draft, but we need to examine the code on the page to know what’s going on here. Can you please create a quick test page with just a short list showing the problem so we can take a look? (You can use the Yoast SEO plugin you’re using to set the test page to noindex).

    Standing by.

    Test Page (valid for 24 hours only): https://us-mallard-keli.instawp.xyz/test/

    The problem is from your theme’s CSS.

    I tried to investigate the issue on your website using browser’s dev tool.

    Apparently, your theme’s numbered list / ordered list (the <ol> tag) do not use the default numbering as you set:

    .list--custom-ordered, ol {
	list-style-type: none;
}

    The numbering is instead added through content: counter(custom-counter) "." on ol li:before. It makes any list items (<li> tags) inside <ol> will have number, including the sub-list that is supposed to be bullet list (<ul> tag).

    The solution would be changing ol li:before in you CSS to ol > li:before.

    Thread Starter marcsazy

    (@marcsazy)

    @taniav I’ve passed this on to our developer, and to quote him: “That guy is the best”. Thank you so much for sending us that! We’re looking to fix that this week so hopefully your solution will be able to be implemented. Thanks again ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Bullet List inside of Numbered List appears buggy’ is closed to new replies.