If you see a ql-indent-1 nested list not working in CMS pages, the usual cause is that the child item was only indented, not nested. In Quill markup, a class such as ql-indent-1 records an indentation level on a list item. In HTML, a real child level exists only when a second <ul> or <ol> sits inside its parent <li>. If the handoff carries the class but the CMS does not load Quill’s stylesheet, the indent disappears and the list looks flat.
The input here is pasted list HTML from a visual editor. The output is a semantic nested list that survives the CMS. I will show how to inspect the markup in the HTML Code Editor, rebuild the nesting by hand when it is needed, and verify the result in the destination. All snippets are illustrative, and I have not run them against any specific CMS.
Table of Contents
Why a ql-indent-1 nested list not working in CMS pages looks flat
The short answer is that indentation and nesting are separate ideas. Quill documents list and indent as separate block formats, so a child item can be stored as a list item plus an indent level. The HTML Living Standard, by contrast, defines list items by their relationship to a list element, as described in the grouping content section of the HTML Standard. A visual indent is not a parent-child relationship.
That gap produces three common outcomes after a paste:
- Flat siblings with a class. The child is an
<li>next to its parent and carriesql-indent-1. Without Quill’s stylesheet, the class changes nothing you can see. - Stripped class. The CMS removes classes it does not recognize, so even the hint on the sibling disappears.
- Rewritten structure. The CMS parses the paste and rebuilds its own list markup, which may or may not keep the levels.
I would not assume every Quill copy is flat. The Quill 2.0 upgrade notes say copied content generates semantic markup for pasting into other applications, and the Quill API documentation lists getSemanticHTML() for export. A selection copy, the editor’s own DOM or innerHTML, and an application export can each give the CMS different markup. The result also depends on the editor version, its configuration and the CMS paste path. Inspect first, then fix.
What ql-indent-1 records and what a nested list needs
In Quill’s older list markup, a nested-looking item is often written like this. Treat it as an illustration, because the exact output depends on your Quill version and configuration.
<ul> <li>Parent</li> <li class="ql-indent-1">Child</li> <li>Sibling</li> </ul>
All three items are siblings in one list. The class is a styling hook: Quill’s stylesheet adds left spacing for it, so the editor appears nested. Remove that stylesheet, or paste into a CMS that never loads it, and the child sits at the same level as its parent. This is the core of the Quill indent class problem: the meaning lives in CSS, not in the element tree.
A semantic nested list puts the child list inside the parent item:
<ul>
<li>Parent
<ul>
<li>Child</li>
</ul>
</li>
<li>Sibling</li>
</ul>Now the relationship is in the markup itself. Browsers apply their default nested-list styling, and any software that reads structure, such as a CMS parser, can tell that Child belongs to Parent. A class name alone gives it nothing to work with. The same class-versus-markup pattern shows up with code, as covered in the guide on why a Quill code block loses formatting in CMS pastes.
Inspect the exact markup you are handing off
Before changing anything, find out which markup you actually have. Build a short test list with a parent, one child and one sibling, then follow these steps.
- Write down the handoff method: a selection copied from the visual canvas, HTML copied from a source view, or an export from your application. Each can differ.
- Paste that exact HTML into the HTML Code Editor. It gives you syntax highlighting, auto-closing tags and a sandboxed live preview, but it has no validation.
- Read the source. Is the child an
<li>withql-indent-1next to its parent, or is there a<ul>or<ol>inside the parent<li>? - Note any other editor-specific attributes on the list or its items. A
data-attribute or an unfamiliar class tells you the CMS may need to handle more than the indent. - Compare the source with what the live preview shows, and remember that the preview is only a browser rendering of your pasted text.
That last point matters. A clean preview does not show what your CMS will keep, because the CMS applies its own sanitizing and its own stylesheet. The preview confirms only that the markup, as written, renders the way you expect in a browser.
If the source already contains a list inside the parent item, your handoff is probably fine and the problem is downstream. If it shows siblings with the indent class, you have found the cause, and the next section shows how to restructure it.
Build the nested list HTML by hand
When the destination needs independent, semantic levels and your handoff is flat, rebuild the nesting in source. The rules are short:
- Place the child list inside the parent
<li>, after the parent’s text and before its closing tag. - Do not put a
<ul>directly inside another<ul>. A list’s children are list items, so a bare child list is invalid markup even though some browsers display it. - Choose
<ul>or<ol>for each level to match the content. Numbered steps with bulleted notes beneath them are fine. - Drop the
ql-indent-*classes once the structure is real. Keeping them can double the indentation wherever Quill’s CSS is present.
This is the common mistake, shown only so you can recognize it:
<ul>
<li>Parent</li>
<ul>
<li>Child</li>
</ul>
</ul>The inner list is a sibling of the items, not a child of Parent. Move it inside the first item, as in the earlier correct example. A third level repeats the pattern: a list inside the Child item, which replaces what would have been ql-indent-2.
Once the structure is right, the HTML Beautifier can lay out the indentation so you can read the tree at a glance. A beautifier only changes layout. It does not repair misplaced tags or confirm that the nesting means what you intended, so read the result yourself.
Why hand-edited nesting can change in the visual editor
There is a trap in this workflow. The WYSIWYG HTML Editor has a Source view and an Apply Changes action, and applied source is converted back through Quill. Markup or attributes that Quill does not support may be removed. If you rebuild a nested list in source and apply it, the visual editor may reinterpret it.
Quill’s own clipboard documentation says pasted HTML is interpreted into its document model and may not reproduce the input exactly. The Delta format describes content as operations with attributes, not as raw HTML, so any round trip is a translation. I cannot promise that a hand-edited structure survives it.
A safer order of work looks like this:
- Do the structural edit in the HTML Code Editor, where the source is the source of truth.
- Copy the finished markup straight to the CMS, skipping the visual round trip.
- If you must apply changes in the visual editor, export again afterward and compare the new HTML with what you wrote.
Treat the code editor as the place to inspect and prepare markup, and treat the visual editor’s final export as something you check separately. Keep a copy of your hand-written source so you can restore it if the round trip rewrites the structure.
Troubleshooting a ql-indent-1 nested list not working in CMS: CSS or structure?
With your nested markup ready, test it in the real destination. Paste or save it through the actual workflow, then compare the CMS’s HTML at three moments: immediately after insertion, after saving and reopening, and in the rendered preview or published page. Each moment can expose a different step, such as a paste filter, a save-time sanitizer or a theme stylesheet.
Use this table to separate a missing style from rewritten structure:
| What the CMS source shows | Likely cause | Next step |
|---|---|---|
Sibling item with ql-indent-1 kept, no visible indent | The destination has no CSS for that class | Rebuild as a nested list, or add destination styling |
| Sibling item with the class removed | The CMS strips classes or flattens on paste | Test the nested structure, which does not rely on classes |
| Nested list present, but markers or spacing look off | Theme list styles | Inspect the theme CSS, not the markup |
| Nested list present at insertion, gone after reopening | A save-time step rewrote it | Review the CMS’s HTML handling and its settings |
If the structure survives but only spacing or markers differ, look at destination styling. If the nested elements or classes disappear, look at how the CMS handles HTML instead of assuming a CSS-only problem. A similar habit of reading source applies when headings look right but are out of order, as explained in the guide to WYSIWYG heading levels out of order.
Final export and rendering checklist
Before you call the list fixed, run through these checks. None of them replaces the others.
- Source check: the child
<ul>or<ol>sits inside the intended parent<li>, and no list is a direct child of another list. - Syntax check: remember the HTML Code Editor does not validate, so use a separate validator if you need one. A clean preview shows rendering only.
- Destination check: the CMS source after insertion, after save and reopen, and on the published page keeps the same nesting.
- Reading check: parent and child text read in the order you intended, and ordered lists restart where they should.
- Reuse check: keep the hand-written source somewhere you can paste it again, since local browser state is not a safe archive.
If you draft lists in Markdown instead, Markdown to Rich Text supports nested lists in its sanitized preview and offers rich and plain clipboard copies. Inspect what it copies the same way, because the destination still decides what it keeps. For related cleanup after a paste, the rule of thumb is unchanged: look at the source, not only at the canvas.
Frequently asked questions
Does ql-indent-1 always mean the list is flat?
No. It means the markup carries an indentation class, which on its own does not create a child list. Whether your handoff is flat depends on the Quill version, its configuration and whether you copied a selection, the editor DOM or an export. Inspect the source to see which you have.
Can I fix the indent with CSS alone?
If the class survives the paste, a destination rule that adds left spacing to it can restore the look. That fixes only the appearance. The items remain siblings, so software that reads structure still sees a flat list. Nesting the child list inside its parent item is the more durable fix.
Why does the preview look right but the CMS shows a flat list?
The sandboxed preview in the HTML Code Editor renders your pasted markup in a browser. It does not apply your CMS’s paste filter, sanitizer or theme stylesheet. A correct preview only shows that the markup is sound, not that the CMS will keep it.
Where exactly does the child list go?
Inside the parent list item. Write the parent’s text, then the child ul or ol, then close the parent li. A list placed directly inside another list, between items, is invalid because a list’s children are list items.
Can I mix ordered and unordered levels?
Yes. Choose the list type for each level to suit its content, such as numbered steps with bulleted notes beneath them. Each child list still has to sit inside its parent item. Check that your CMS keeps both types after saving.
Will applying source changes in the visual editor keep my nesting?
I cannot promise it. Applied source is converted back through Quill, and unsupported markup or attributes may be removed. Prepare the markup in the code editor, copy it directly to the CMS, and if you do round-trip it, export again and compare.
How do I add a third level?
Repeat the pattern: put another list inside the child list item. That replaces what ql-indent-2 would have recorded. Then check in your CMS that the third level survives insertion, saving and the published page, since handling can vary by destination.
Next steps
A ql-indent-1 nested list not working in CMS pages is almost always a question of structure versus presentation. The class records an indent level in Quill, while real levels need a child list inside its parent item. Inspect the exact handoff, rebuild the nesting in source where needed, and verify the CMS result after insertion, after reopening and on the rendered page. As a next step, paste a three-item test list into the HTML Code Editor and check whether the child sits inside its parent before you change any CMS settings.
Related tools and resources on HTML Editor Online:
- HTML Code Editor
- WYSIWYG HTML Editor
- Why a Quill Code Block Loses Formatting in CMS Pastes
- WYSIWYG Heading Levels Out of Order: Fix Subheadings That Look Right
