Outline formatting is misleading/misaligned when only some nodes have children (heading indentation)

This is a great solution. THANK YOU.

That snippet alone is already 95% production-ready. The spacing/margins just need a little extra polishing by a designer to make it 100%.

:eyes:

1 Like

But only the

.mod-collapsible .collapse-icon {
  margin-left: -20px; /* adjust as needed */
}

part was needed. And tweaking the value

5 Likes

That is wild.

So, for those who want to fix the problem without delving into the details of Obsidian mechanics. Here is the instruction that worked for me (thanks to the commenters above for the solution):

Create an indentation_fix.css file in your Vault, in the folder “.obsidian\snippets”.

The contents of the file should be as follows:

/* Fixes problem with indent in Outline for empty and non-empty headings */
.mod-collapsible .collapse-icon {
  margin-left: -16px; /* adjust as needed */
}

Launch Obsidian. In Settings — Appearance — CSS snippets apply your newly created indentation_fix.css.

If the alignment is not perfect, replace -16px in the file with -20px or something.

PS. I still don’t understand how zerkshop managed to find out from ChatGPT the exact place in css where changes should be made. I tried using ChatGPT, but he didn’t even understand my problem.

1 Like

I crafted some CSS to give all the non-collapsible items in the tree a nice bullet point and fixed up the alignment:

.tree-item {
  position: relative;
}
.tree-item-icon {
  position: absolute;
}
.tree-item-inner {
  margin-left: calc(2.5 * var(--size-2-3));
}
.tree-item-self {
  position: relative;
}
.tree-item-self::before {
  content: '';
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='currentColor' /%3E%3C/svg%3E%0A") no-repeat 50% 50%;
  mask-size: cover;
  left: 11px;
  width: calc(.25 * var(--nav-item-size));
  height: calc(.25 * var(--nav-item-size));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--collapse-icon-color);
  opacity: 0.85;
}
.tree-item-self.mod-collapsible::before {
  display: none;
}
.tree-item-children {
  padding-left: 0;
}

Screen Shot 2023-03-12 at 12.49.02 PM

7 Likes

+1 to everyone saying the default behaviour is confusing and reduces the effectiveness of the outliner. Bug or not, it’s a UX issue

I’ve been using @valkyrie’s snippet. Perfect fix.

1 Like

Great! Thank you!!!

For the very lazy:
Put
outline-indentation-correction.css (952 Bytes)

into the folder “.obsidian\snippets”.

Launch Obsidian. In Settings — Appearance — CSS snippets to enable your newly created css.

If the alignment is not perfect, replace -16px in the file with -20px or something.

1 Like

Are you aware that this is solved? It will be minimal work for the Obsidian team to integrate this fix.

You are free to use this workaround. A more permanent solution will worked in the following months.

4 Likes

Great! Thank you. :slight_smile:

I haven’t updated to 1.2.7 yet, but is this the fix?

from Obsidian Release v1.2.7:

No, it’s not.

The CSS snippet works perfectly for the Outline, but with the new Bookmarks core plugin(v1.2.7), it also affects the icons there
Screenshot 2023-05-07 at 4.22.01 PM

Here’s an updated version :slight_smile: I found a way to target only the outline and not change anything inside the bookmarks panel

[data-type="outline"] .tree-item {
  position: relative;
}
[data-type="outline"] .tree-item-icon {
  position: absolute;
}
[data-type="outline"] .tree-item-inner {
  margin-left: calc(2.5 * var(--size-2-3));
}
[data-type="outline"] .tree-item-self {
  position: relative;
}
[data-type="outline"] .tree-item-self::before {
  content: '';
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='currentColor' /%3E%3C/svg%3E%0A") no-repeat 50% 50%;
  mask-size: cover;
  left: 11px;
  width: calc(.25 * var(--nav-item-size));
  height: calc(.25 * var(--nav-item-size));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--collapse-icon-color);
  opacity: 0.85;
}
[data-type="outline"] .tree-item-self.mod-collapsible::before {
  display: none;
}
[data-type="outline"] .tree-item-children {
  padding-left: 0;
}
2 Likes

Thanks @valkyrie

1 Like

Thank you so much for the update! :grinning:

1 Like

will be re-engineered in v.1.3.1

2 Likes

Thank you for fixing this. Little thing that makes a BIG difference. :pray:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.