Checkbox Item Alignment (Div vs Span)

[kleutzinger]

Description

Intro

This is kind of a specific, odd behavior with checkboxes and their contents. It may apply to other lists, but I haven't really visually seen it. Fixing this could just be some CSS, I don't really care about the internal html representation, but I do care about the visual alignment somewhat.

The behavior and examples

Only sometimes checkbox < li > elements are wrapped in a div which affects vertical alignment of the text.

Here is a full note source showing both alignments:

a way to trigger the div alignment is to paste an html link (like a blue html link copied from a browser with a separate href and text content) into a checkbox. Then, oddly, all subsequent lists below that one will have

wrappers, too, wether or not you paste a link.

<ul class="todo-list">
	<li>
		<label class="todo-list__label">
			<input type="checkbox" disabled="disabled">
			<span class="todo-list__label__description">
				in a span, not a div
			</span>
		</label>
	</li>
	<li>
		<label class="todo-list__label">
			<input type="checkbox" disabled="disabled">
			<span class="todo-list__label__description">
				ab
			</span>
		</label>
	</li>
	<li>
		<label class="todo-list__label">
			<input type="checkbox" disabled="disabled">
			<span class="todo-list__label__description">
				cc
			</span>
		</label>
	</li>
</ul>
<p>
	&nbsp;
</p>
<p>
	&nbsp;
</p>
<ul class="todo-list">
	<li>
		<label class="todo-list__label todo-list__label_without-description">
			<input type="checkbox" disabled="disabled">
		</label>
		<div>
			<a href="https://github.com/TriliumNext/Trilium/issues/new?template=bug_report.yml">
				New Issue
			</a>
			 in a div
		</div>
	</li>
	<li>
		<label class="todo-list__label todo-list__label_without-description">
			<input type="checkbox" disabled="disabled">
		</label>
		<div>
			abc
		</div>
		<ul class="todo-list">
			<li>
				<label class="todo-list__label todo-list__label_without-description">
					<input type="checkbox" disabled="disabled">
				</label>
				<div>
					abc
				</div>
			</li>
		</ul>
	</li>
	<li>
		<label class="todo-list__label todo-list__label_without-description">
			<input type="checkbox" disabled="disabled">
		</label>
		<div>
			abc
		</div>
	</li>
</ul>
<div>
	&nbsp;
</div>
<ul class="todo-list">
	<li>
		<label class="todo-list__label todo-list__label_without-description">
			<input type="checkbox" disabled="disabled">
		</label>
		<div>
			abc
		</div>
	</li>
</ul>
<div>
	&nbsp;
</div>
<hr>
<p>
	&nbsp;
</p>
<ul class="todo-list">
	<li>
		<label class="todo-list__label">
			<input type="checkbox" disabled="disabled">
			<span class="todo-list__label__description">
				not div anymore?
			</span>
		</label>
	</li>
</ul>

TriliumNext Version

0.96.0

What operating system are you using?

Windows

What is your setup?

Local (no sync)

Operating System Version

Windows 10

Error logs

No response

[dosubot]

Hi @kleutzinger! I'm Dosu and I’m helping the Trilium team.

This alignment issue happens because CKEditor (used by Trilium) decides whether to wrap checkbox content in a or a

based on whether the content is simple/inline or complex/block. Pasting an HTML link or other rich content into a checkbox item triggers CKEditor to use a

, which affects alignment for that and subsequent items. This is a side effect of CKEditor's content modeling, not a Trilium-specific bug.

There are no built-in or official CSS fixes for this, but you can achieve consistent alignment by adding custom CSS that targets both and

label containers in your todo lists. For example, you can add a custom theme note in Trilium with something like:

.todo-list__label__description,
.todo-list__label + div {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em; /* adjust as needed */
  /* Add any other styling needed to match your preferred look */
}

This will help align both and

content next to checkboxes. You can apply this CSS by creating a note labeled appTheme and pasting the CSS there, then selecting your theme in Options → Appearance and reloading the frontend (CTRL-R) to see the changes. More info on theming is in the Trilium Themes documentation.

Keep in mind that future updates to Trilium or CKEditor could change the HTML structure, so you may need to adjust your CSS if things shift in later versions.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[eliandoran]

We should probably completely disallow <div>s since they cause a lot of annoyance.

[kleutzinger]

Another related issue is that pasting a rich link into a checked box unchecks the box every time. (note that all I had copied was an html link, not some more complex li object).

checkbox-cleared-on-rich-paste.webm

[kleutzinger]

another clue: It seems like rich html links are always pasted as some type of (unspecified?) header. If you change from "Choose heading" back to "paragraph" then it resolves most of the alignment problems.

This happens pasting rich links anywhere in a text note; not just lists.